Greasy Fork is available in English.

MyDrag

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

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

作者
wish king
得分
0 0 0
版本
0.1.3
创建日期
最近更新
许可协议
不适用
应用到
所有站点

简介:

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