可根据自身业务逻辑,决定是否允许拖拽或继续拖拽,很简单,darg.js拿来即用!!!
github地址:https://gitee.com/dmui/darg/tree/master/
引入cdn文件darg.js: https://gitee.com/dmui/darg/raw/master/darg.js
用法说明:
/**
* shouldDargHandel [可选] :是否允许拖拽的自定义逻辑处理函数
*
* 完成darg初始化后
* 返回当前元素
*/
用法: element.darg([ shouldDargHandel ]);
如何完成拖拽注册:
<style>
.demo{
width: 80px;
height: 80px;
border-radius: 5px;
background: burlywood;
margin: 10px;
display: inline-block;
font-size: 13px;
padding: 2px;
top: 100px
}
#demo2{
background: aquamarine;
top: 200px;
}
#demo3{
background: coral;
top: 300px;
}
</style>
<div id="demo1" class="demo">默认不允许超出视口</div>
<div id="demo2" class="demo">总是允许拖拽</div>
<div id="demo3" class="demo">总是不允许拖拽</div>
<script>
//默认允许拖拽,但不允许超出视口
document.getElementById("demo1").darg();
//总是允许拖拽,甚至超出视口范围
document.getElementById("demo2").darg(function () {
return true;
});
//总是不允许拖拽
document.getElementById("demo3").darg(function () {
return false;
});
</script>
下班吧!!!