标签：append ntb 有一个 asc var ble nal 执行 drag
1、设置元素可拖放（draggable: true）
<img draggable=‘true‘ id=‘source‘/>
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‘;
});
标签：append ntb 有一个 asc var ble nal 执行 drag
原文地址：http://www.cnblogs.com/running1/p/7506552.html
