其实所谓的拖放就是拖动那个元素，然后就会打开一个新的页面，根据拖动元素所随带的信息来实现不同的功能。如果没有携带，则有浏览器自己来决定如何做。
<body>
<div id="source" style="width:80px;height:80px;border:1px solid black; background-color:#bbb;" draggable="true">
我不想让你知道我是谁
</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function(evt){
evt.dataTransfer.setData("text/plain" , "http://www.sina.com");
}
</script>
</body>
-------》在拖动的时候图片上方会显示“禁止”图标。document对象默认阻止了拖动事件，而其他HTML组件也是位于document对象内的，因此它们也不能接受“放”。
所以需要在script代码中添加对于“放”的处理。
通过javascript代码把该元素移动到相应的位置：
<body>
<div id="source" style="width:80px;height:80px;
border:1px solid black;
background-color: #bbb;"
draggable="true">疯狂</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function(evt)
{
// 让拖动操作携带数据
evt.dataTransfer.setData("text/plain" , "www.fkjava.org");
}
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
document.ondrop = function(evt)
{
source.style.position = "absolute";
source.style.left = evt.pageX + "px";
source.style.top = evt.pageY + "px";
// 取消事件的默认行为
return false;
}
</script>
</body>
------->DataTransfer对象
拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法。
通过DataTransfer对象，可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时，将拖放源的数据存入DataTransfer对象中，然后在拖放结束时从DataTransfer对象读取数据，这样就可以完成更复杂的拖放操作。
实现一个允许通过拖放来添加、删除“收藏项”的功能。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 通过拖放实现添加、删除 </title>
<style type="text/css">
div>div{
display: inline-block;
padding: 10px;
background-color: #aaa;
margin: 3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>可将喜欢的项目拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event);">疯狂Java联盟</div>
<div draggable="true" ondragstart="dsHandler(event);">疯狂软件教育</div>
<div draggable="true" ondragstart="dsHandler(event);">关于我们</div>
<div draggable="true" ondragstart="dsHandler(event);">疯狂成员</div>
</div>
<div id="dest"
style="width:400px;height:260px;
border:1px solid black;float:left;">
<h2 ondragleave="return false;">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="garbagebin.png"
alt="垃圾桶" style="float:left;"/>
<script type="text/javascript">
var dest = document.getElementById("dest");
// 开始拖动事件的事件监听器
var dsHandler = function(evt)
{
// 将被拖动元素的innerHTML属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain"
, "<item>" + evt.target.innerHTML);
}
dest.ondrop = function(evt)
{
var text = evt.dataTransfer.getData("text/plain");
// 如果该text以<item>开头
if (text.indexOf("<item>") == 0)
{
// 创建一个新的div元素
var newEle = document.createElement("div");
// 以当前时间为该元素生成一个唯一的ID
newEle.id = new Date().getUTCMilliseconds();
// 该元素内容为“拖”过来的数据
newEle.innerHTML = text.substring(6);
// 设置该元素允许拖动
newEle.draggable="true";
// 为该元素的开始拖动事件指定监听器
newEle.ondragstart = function(evt)
{
// 将被拖动元素的id属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain"
, "<remove>" + newEle.id);
}
dest.appendChild(newEle);
}
}
// 当把被拖动元素“放”到垃圾桶上时激发该方法。
document.getElementById("gb").ondrop = function(evt)
{
var id = evt.dataTransfer.getData("text/plain");
// 如果id以<remove>开头
if (id.indexOf("<remove>") == 0)
{
// 根据“拖”过来的数据，获取被拖动的元素
var target = document.getElementById(id.substring(8));
// 删除被拖动的元素
dest.removeChild(target);
}
}
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
document.ondrop = function(evt)
{
// 取消事件的默认行为
return false;
}
</script>
</body>
------>拖放行为
设置effectAllowed、dropEffect两个属性可以控制施放行为。
effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性。
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 拖放行为 </title>
</head>
<body>
<div id="source" draggable="true" style="width:80px;height:60px;
border:1px solid black;">拖动我</div>
<script type="text/javascript">
var source = document.getElementById("source");
var dest = document.getElementById("text");
source.ondragstart = function(evt)
{
var dt = evt.dataTransfer;
// 可设置move、copy等属性值看看效果
dt.effectAllowed = ‘link‘;
dt.setData("text/plain", "www.fkjava.org");
}
// 允许拖动
document.ondragover = function(e){return false;};
</script>
</body>
改变拖动图标：
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 拖放行为 </title>
</head>
<body>
<div id="source" draggable="true" style="width:80px;height:60px;
border:1px solid black;">拖动我</div>
<script type="text/javascript">
var source = document.getElementById("source");
var dest = document.getElementById("text");
var myIcon = document.createElement("img");
myIcon.src = "my.gif";
source.ondragstart = function(evt)
{
var dt = evt.dataTransfer;
// 可设置move、copy等属性值看看效果
dt.effectAllowed = ‘link‘;
dt.setDragImage(myIcon , 0 , 0);
dt.setData("text/plain", "www.fkjava.org");
}
// 允许拖动
document.ondragover = function(e){return false;};
</script>
</body>
</html>
时间： 2024-10-27 08:13:43