Greasy Fork is available in English.

MyDrag

DIV拖动库，稳定高效，专为您解决DIV拖动的烦恼

Verzia zo dňa 29.09.2020. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/412159/852563/MyDrag.js

Autor
wish king
Verzia
0.1.1
Vytvorené
28.09.2020
Aktualizované
29.09.2020
Licencia
neuvedené

简介：

当你想找一个拖动库的时候，你抓耳挠腮。自己写？
省了吧，费事费力不说，说不定还一堆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内拖动
lock: //是否锁定位置，默认false，锁定后无法拖动
lockX: //是否锁定水平位置，默认false，锁定后只能y轴拖动
lockY: //是否锁定垂直位置，默认false，锁定后只能x轴拖动
onStart: function () {}, //开始时回调函数
onMove: function () {}, //拖拽时回调函数
onStop: function () {} //停止时回调函数