当前第2页 返回上一页
1 2 3 4 5 6 | $('#box').draggable({
onStartDrag : function (e) {
alert('拖动开始时触发！');
//return false;
}
});
|
在鼠标点击后拖动的一瞬间执行，执行时间在onBeforeDrag之后。
3.onDrag拖拽过程中执行
1 2 3 4 5 6 | $('#box').draggable({
onDrag : function (e) {
alert('拖动过程中触发！');
}
});
在拖
|
动的过程中执行，当鼠标一移动就会执行，当不能拖动时返回false
4.onStopDrag 拖动停止后发生
1 2 3 4 5 | $('#box').draggable({
onStopDrag : function (e) {
alert('在拖动停止时触发！');
}
});
|
在拖动结束后触发，即松开鼠标时执行，无返回值。
5.以上事件可组合使用，执行顺序为onBeforeDrag --> onBeforeDrag --> onDrag --> onStopDrag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $('#box').draggable({
onBeforeDrag : function (e) {
alert('拖动之前触发！');
//return false;
},
onStartDrag : function (e) {
alert('拖动时触发！');
},
onDrag : function (e) {
alert('拖动过程中触发！');
},
onStopDrag : function (e) {
alert('在拖动停止时触发！');
},});
|
三、方法（第三是方法）
方法名：说明
1 2 3 4 5 6 7 8 9 10 | //返回属性对象
console.log($('#box').draggable('options'));
//返回代理元素
onStartDrag : function (e) {
console.log($('#box').draggable('proxy'));
},
//禁止拖动
$('#box').draggable('disable');
//允许拖放
$('#box').draggable('enable');
|
四、设置默认属性（这是最后一个设置）
在一次设置后当前页面所有拖拽都会共享这个属性，不用再去设置。
1 2 3 | $(function(){
$.fn.draggable.defaults.cursor = 'text';
});
|
以上就是这篇关于draggable属性的页面拖动方面的全部内容了（想学更多就来PHP中文网），有问题的可以在下方提问。
【小编推荐】
html中的ol标签如何去掉标号呢？<ol>标签的使用方法总结
HTML中ul标签如何去掉点？HTML无序列表的样式实例解析
以上就是html5draggable属性是如何做到页面拖动效果的？方法总结在这里！的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
margin-top在html中的意思是什么
html中form与表单提交操作的方法总结
html的头部有什么元素
在html中white-space是什么
html中怎么设置超链接
html中的特殊字符如何源码输出
学会html能做什么工作
html中<meta>标签该如何使用
html如何设置背景色
html中的table详解
更多相关阅读请进入《draggable》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html5draggable属性是如何做到页面拖动效果的？方法总结在这里！
