MyDrag

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

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.cn-greasyfork.org/scripts/412159/858320/MyDrag.js

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 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相互增加高度