在 HTML5 中，拖放是标准的一部分，即抓取对象以后拖到另一个位置(添加已定义好的父级元素里)，任何元素都能够拖放。

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

*注释：在 Safari 5.1.2 中不支持拖放。

让元素可拖动，把 draggable 属性设置为 true 。

eg:

拖拽文字

然后，规定当元素被拖动时，会发生什么。

ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

拖拽文字

dataTransfer.setData() 方法设置被拖数据的数据类型和值。

1 function drag(e1){ 2 e1.dataTransfer.setData('text',e1.target.id); 3 }

*数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法。

当放置被拖数据时，会发生 drop 事件。

ondrop 属性调用了一个函数，drop(event)。

html :

js:

1 function allow(e){ 2 e.preventDefault(); 3 } 4 function drop(e){ 5 var tag=e.dataTransfer.getData('text'); document.getElementById('box').appendChild(document.getElementById(tag)) 6 }

拖拽文字（添加已定义好的父级元素里）（功能一般为清除的垃圾箱） drag(e1){ ,e1.target.id); 15 } 16 function allow(e){ 17 e.preventDefault(); 18 } 19 function drop(e){ ); ).appendChild(document.getElementById(tag)) 22 }

转自：w3school.com

Title 来拖动我啊 dragged; (event) { event.target; ; ); (event) { ); (event) { ) { ; 62 } ); (event) { ); (event) { ); ; ); (event) { ); ) { ; 86 } ); (event) { ); event.preventDefault(); ) { ; dragged.parentNode.removeChild(dragged); event.target.appendChild(dragged); 102 } );

转自：完善飞跃

 拓展学习--经典例子：

HTML5--拖拽API(含超经典例子)：

1、HTML5 Sortable 是一个轻量级排序插件，使用原生的 HTML5拖放 API 创建排序列表和网格。

 2、 Draggabilly 是一个很小的 JavaScript 库，只需要简单的设置参数就可以在你的网站用添加拖放功能。兼容 IE8+ 浏览器，支持多点触摸。可以灵活绑定事件，支持 RequireJS 以及 Bower 安装。中文可参照：。

3、html5和js超实用的拖放UI界面设计：

[来自：jQuery之家]

4、11个好用的jQuery拖拽拖放插件

2017-11-08