MyDrag

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

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/412159/858320/MyDrag.js

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
wish king
版本
0.1.3
创建于
2020-09-28
更新于
2020-10-16
大小
9.9 KB
许可证
暂无

简介:

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