這裏例子可以用於Web IDE、工作流拖拽 、在線界面設計，更多功能敬請各位開發分享
<!DOCTYPE html>
<html>
<head>
<title>jQuery拖放操作演示</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
const 事件_鼠標按下 = "mousedown";
const 事件_鼠標擡起 = "mouseup";
const 事件_鼠標移動 = "mousemove";
const 左 = "left";
const 上 = "top";
const 定位方式 = "position";
const 絕對 = "absolute";
const 空 = null;
const 假 = false;
const 真 = true;
const 未定義 = undefined;
$.fn.獲取位置 = $.fn.position;
$.fn.綁定事件 = $.fn.on;
$.fn.解綁事件 = $.fn.off;
$.fn.樣式 = $.fn.css;
$.fn.拖放 = function () {
let 位置, 拖拽狀態, 開始偏移量X, 開始偏移量Y, 目標組件;
let 拖放容器 = $("html");
$(this).解綁事件();
$(this).綁定事件(事件_鼠標按下, function (事件) {
目標組件 = this;
位置 = $(目標組件).獲取位置();
開始偏移量X = 事件.pageX;
開始偏移量Y = 事件.pageY;
拖拽狀態 = 真;
})
拖放容器.綁定事件(事件_鼠標擡起, function (事件) {
位置 = 空; 拖拽狀態 = 假; 開始偏移量X = 空; 開始偏移量Y = 空; 目標組件 = 空;
})
拖放容器.綁定事件(事件_鼠標移動, function (事件) {
if (拖拽狀態 == 真 && 目標組件 != 未定義) {
$(目標組件).樣式(左, 位置.left + (事件.pageX - 開始偏移量X))
$(目標組件).樣式(上, 位置.top + (事件.pageY - 開始偏移量Y))
$(目標組件).樣式(定位方式, 絕對)
}
})
};
$(() => {
$(".可拖放").拖放();
})
</script>
</head>
<body>
<div class="可拖放" style="width:30px;height: 30px;background-color: red;"></div>
<div class="可拖放" style="width:30px;height: 30px;background-color: blue;"></div>
</body>
</html>
最後說一句：中文編程就是爽