Greasy Fork is available in English.

MyDrag

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

您查看的为 2020-09-29 提交的版本。查看 最新版本

此脚本不应被直接安装,它是一个供其他脚本使用的外部库。如果您需要使用该库,请在脚本元属性加入:// @require https://greasyfork.org/scripts/412159-mydrag/code/MyDrag.js?version=852563

作者
wish king
版本
0.1.1
创建日期
2020-09-28
最近更新
2020-09-29
许可证
暂无

简介:

当你想找一个拖动库的时候,你抓耳挠腮。自己写?
省了吧,费事费力不说,说不定还一堆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 () {} //停止时回调函数