实现下面的小例子：
image.png
<body>
<!-- 结构层 -->
<div id="container" class="container" ondrop="drop(event)" ondragover="dragover(event)"></div>
<div id="target" class="target" draggable="true" ondragstart="dragstart(event)"></div>
<!-- js部分 -->
<script type="text/javascript">
var dragstart = function(e){
e.dataTransfer.setData("Text",e.target.id);
}
var drop = function(e){
e.preventDefault();//拖动的默认处理方式是新窗口打开，故阻止之。
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
var dragover = function(e){
e.preventDefault();
}
</script>
</body>
在进行拖放操作时，DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。关于拖放的更多信息，请参见 Drag and Drop.
这个对象在所有的拖动事件属性dataTransfer 都是可用的，但是不能单独创建，没有du。
网友评论