学习要点
- 加载方式
- 属性列表
- 事件列表
- 方法列表 (暂时)
加载方式
- 第一种以 class类的形式调用 (个人强烈不推荐)
<div class="easyui-draggable"></div>
- 第二种以Js形式调用(最好使用)
$("#box").draggable();
draggable的属性
- revert
设置为true的时候，则拖动停止时候返回原位置，默认就是false
- cursor
拖动时 css 指针的样式 默认就是move，改成pointer就是手指
- handle
开始拖动的句柄。只有鼠标放到上面才可以拖动
- disabled
设置为true 则停止拖动。默认就是false
- edge
在其中拖动的容器的周围的宽度。只有比这个数值大。才能开始拖动
- axis
设置为'v'则只有垂直才可以拖动，设置为'h'则只有水平可以拖动
- proxy
可以设置为方法，也可以设置为clone,这样表示拖拽的就是原对象的克隆
事件列表（重要）
- onBeforeDrag
参数e 拖动之前触发，返回false 将取消拖动
- onStartDrag
参数e 拖动开始时触发
- onDrag
参数e 拖动过程中触发,不能拖动时候返回false
- onStopDrag
参数e 拖动停止时触发
HTML部分
<style>
*{margin:0px;padding:0px;}
#draggdiv{width:300px;height:300px;background:red;overflow: hidden;}
#dragp{width:150px;height:150px;background:blue;margin:0 auto;margin-top:75px;}
</style>
<div id="draggdiv">
<p id="dragp">元素一</p>
</div>
js调用部分
$("#draggdiv").draggable({
revert: false,//默认就是 false 要是true，则拉到终点，又会返回到初始的位置。
cursor:"pointer", //代表鼠标的符号，默认就是move，要是pointer就是手指
handle:"#dragp", //开始拖动的元素，鼠标只有在这个元素上才能拖拽
disabled:false, //表示是否允许拖拽，默认是false允许拖拽，要是true则不允许
edge: 50, //元素上下左右50以为不能拖拽，50以外可以拖拽
//axis:"h", //H只能水平方向,要是V只能垂直方向
/*下面这3个一起使用效果好*/
proxy:"clone", //当时用clone则克隆一个代替元素拖动，如果指定一个函数，则自定义代替元素
deltaX: 100, //相当于鼠标的偏移位置横轴
deltaY:100, //相当于鼠标的外衣位置纵轴
/*事件开始*/
onBeforeDrag:function(){console.log("开始拖拽前");}, //在开始前拖拽
onStartDrag:function(){console.log("开始拖拽")}, //拖拽开始时候触发
onDrag:function(){console.log("拖动过程触发,不能拖动时候返回false")}, //拖动过程中触发
onStopDrag:function(){console.log("拖动结束")}
})
方法部分
$("#draggdiv").draggable("disable"); //禁止拖拽
$("#draggdiv").draggable("enable"); //允许拖拽
限制区域内移动
HTML代码
<body>
<style>
*{margin:0px;padding:0px;}
#draggwrap{width:800px;height:500px;border:1px solid #ccc;margin:0 auto;margin-top:100px;}
#draggdiv{width:100px;height:100px;background:red;overflow: hidden;}
</style>
<div id="draggwrap">
<div id="draggdiv"></div>
</div>
</body>
这里要用到事件传递的参数e 它里面有个属性就是e.data.left和e.data.top这两个属性决定范围
$("#draggdiv").draggable({
onDrag:function(e){
//获取到e的data数据
var top = $("#draggwrap").offset().top;
var left = $("#draggwrap").offset().left;
var width = $("#draggdiv").width(); /*获取到宽度*/
var height = $("#draggdiv").height();/*获取到高度*/
var MaxTop = $("#draggwrap").height()+top;
var MaxLeft = $("#draggwrap").width()+left;
if(e.data.top<top)
{
e.data.top = 100;
return false;
}
if(e.data.left<left)
{
e.data.left = left;
return false;
}
//下边和右边
if(e.data.left>=MaxLeft-width)
{
e.data.left = MaxLeft-width;
return false;
}
if(e.data.top>=MaxTop-height)
{
e.data.top = MaxTop-height;
return false;
}
}
})
