Greasy Fork is available in English.

MyDrag

DIV拖动库，稳定高效，专为您解决DIV拖动的烦恼，支持多实例

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/412159/858320/MyDrag.js

Tác giả
wish king
Phiên bản
0.1.3
Đã tạo
28-09-2020
Đã cập nhật
16-10-2020
Giấy phép
N/A

简介：

当你想找一个拖动库的时候，你抓耳挠腮。自己写？
省了吧，费事费力不说，说不定还一堆bug，等搞稳定了黄花菜都凉了。
好了，今天起你有了DIV拖动库，高效稳定，专为您解决DIV拖动的烦恼，支持多实例。
简约而不简单！

有图有真相：




使用示例：

//样式，这里样式仅仅为了演示好看，实际上只需要设置box宽度就好了,如果没设置宽度，div默认100%，不利于看到效果
body,div,h2,p{margin:0;padding:0}
body{font:14px/1.5 arial}
#box{width:300px;height:100px;background:#fef4eb;padding:5px;border:1px solid #666}
#box #title{height:25px;background:#ccc;display:inline-block;cursor:move;width:100%;text-align:center}
.content{text-align:center;line-height:50px}

//html
<div id="box">
<span id="title">按下我拖拽</span>
<div class='content'>内容区</div>
</div>

//调用
var box = document.getElementById("box");
var title = document.getElementById("title");
new MyDrag(box, {handle:title});
//box是拖拽最外层的div，title是按下时控制句柄的div

//其他参数
handle: //拖动控制句柄，就是上面示例的title
limit: //是否限制拖动范围，默认是true
maxContainer: //拖动限制范围的容器，默认是body，可设置在某个div内拖动
top: //顶部位置,默认0
left: //左边位置,默认0
bottom: //底部位置，默认0，不支持非body的限定容器
right: //右边位置，默认0，不支持非body的限定容器
position: //默认浮动方式，默认absolute
onlyViewport: //是否仅在视窗内拖动，默认true
lock: //是否锁定位置，默认false，锁定后无法拖动
lockX: //是否锁定水平位置，默认false，锁定后只能y轴拖动
lockY: //是否锁定垂直位置，默认false，锁定后只能x轴拖动
onStart: function () {}, //开始时回调函数
onMove: function () {}, //拖拽时回调函数
onStop: function () {} //停止时回调函数
zIndex: 可以设置z轴高度，默认会先读取内联样式的设置，再读取css样式设置，都无则是999999999
alone: 是否孤立的，为了防止拖动目标覆盖，默认会和其他拖动层的zIndex相互增加高度