☰

Greasy Fork is available in English.

MyDrag

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

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/412159/858320/MyDrag.js

نووسەر
wish king
وەشان
0.1.3
Created
2020-09-28
Updated
2020-10-16
مۆڵەت
نییە

简介：

当你想找一个拖动库的时候，你抓耳挠腮。自己写？
省了吧，费事费力不说，说不定还一堆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相互增加高度