HTML5原生拖拽功能 （结合jQuery）
基于HTML5的原生支持，只是用jQuery来取元素，以table中行拖拽为样例进行演示，对于其中的事件就不详细解释，如不理解问百度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="referrer" content="always"/>
<style type="text/css">
/*拖拽时，经过的其他对象的样式 */
.overClass{
border: 1px solid #000;
}
/*拖拽对象的样式 */
.dragClass {
background-color: gray;
}
</style>
<script type="text/javascript" src="https://static-blog.csdn.net/scripts/jquery.js"></script>
<script type="text/javascript">
$(function () {
console.log(1)
$("tbody tr").attr("draggable", true); // 为对象添加可拖拽属性
console.log($("tbody tr"))
// 拖动对象
$("tbody tr").bind("dragstart", function (event) { //dragstart 拖动时触发
var originalEvent = event.originalEvent;
originalEvent.dataTransfer.setData("srcDomId", originalEvent.target.id);
$(this).addClass("dragClass");
}).bind("dragend", function (event) { //dragend 户完成元素拖动后触发
var originalEvent = event.originalEvent;
$(this).removeClass("dragClass");
});
// 拖动时经过对象
$("tbody tr").bind("dragover", function (event) {
if ($(this).is("tr")) {
console.log($(this).attr("id"));
$(this).addClass("overClass");
}
event.preventDefault(); // dragover 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
});
//拖动时经过对象
$("tbody tr").bind("dragleave", function (event) { //
$(this).removeClass("overClass");
event.preventDefault();
});
// 放置区域对象
$("tbody tr").bind("drop", function (event) {
var originalEvent = event.originalEvent;
var srcDomId = originalEvent.dataTransfer.getData("srcDomId");
$(this).removeClass("overClass");
if ($(this).attr("id") != srcDomId) {
$(this).before($("#" + srcDomId).detach());
}
event.preventDefault();
});
})();
</script>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr>
</thead>
<tbody style="cursor: pointer;">
<tr id="1">
<td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr id="2">
<td>2</td><td>2</td><td>2</td><td>2</td></tr>
<tr id="3">
<td>3</td><td>3</td><td>3</td><td>3</td>
</tr>
<tr id="4">
<td>4</td><td>4</td><td>4</td><td>4</td></tr>
<tr id="5">
<td>5</td><td>5</td><td>5</td><td>5</td></tr>
</tbody>
</table>
</body>
</html>