HTML5 拖放API

标签：append   ntb   有一个   asc   var   ble   nal   执行   drag   1、设置元素可拖放（draggable: true）2、拖动什么ondragstart setData var source = document.getElementById(‘source‘); source.addEventListioner(‘dragstart‘, function (event) { event.dataTransfer.setData(‘Text‘, event.target.id) }, false) // event.dataTransfer对象的setData方法可以给拖放的元素添加数据 // setData() 参数1：要添加的内容的MIME Type 参数2：MIME Type对应的数据 另外，对于链接、图片以及被选中的文字这些本来就可以拖动的元素，在拖动的时候会自动关联数据，对于链接关联的数据就是链接，对于图片就关联图片，对于选中的文字关联的就是文字了。 3、拖动到哪儿 ondragover默认情况下元素都是不接受放置拖拽的，绑定dragover和dragenter，取消这两个事件的默认行为 var target = document.getElementById(‘target‘); target.addEventListener(‘dragover‘,function (event) { event.preventDefault(); }, false) target.addEventListener(‘dragenter‘,function (event) { event.preventDefault(); }, false) 4、进行放置 ondrop事件 target.addEventListener(‘drop‘,function (event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChildren(document.getElementById(data)) }, false) // event.dataTransfer对象的getData方法有一个参数，获得之前添加的拖放元素的MIME Type event.dataTransfer还有effectAllowed和dropEffect这两个属性effectAllowed 这个属性用来描述拖放的元素能够接受什么样的操作 * copy * link * move * copyLink * copyMove * linkMove * all * none * uninitialized 这个属性只能在拖放元素的 dragstart 事件处理程序中设置。 $source.on(‘dragstart‘,function(event){ event = event.originalEvent; event.dataTransfer.effectAllowed = ‘move‘; event.dataTransfer.setData(‘text/plain‘,$(this).text()); }); dropEffect 用来设置目标元素将执行的操作，如果其属性值属于 effectAllowed 范围内，那么鼠标就会呈现一个接受放置的样子，松开鼠标按键后就会触发 drop 事件，否则就不会触发 drop 事件。这个属性的取值有下面几种： * copy ：表示应该把拖动的元素复制到这里。 * link ：表示放置的目标应该打开拖动的元素。 * move ：应该把拖动的元素移动到这里。 * none ：不能把拖动元素放置在这里。 该属性要在放置目标的 dragover 事件处理程序中设置才有效。 $target.on(‘dragover‘,function(event){ event.preventDefault(); event = event.originalEvent; event.dataTransfer.dropEffect = ‘move‘; }); 　　  HTML5 拖放API标签：append   ntb   有一个   asc   var   ble   nal   执行   drag   原文地址：http://www.cnblogs.com/running1/p/7506552.html