文档：https://www.jeasyui.cn/document/index/index.html
一. 结构分析
(function($){
//可以调用的方法
function drag(e){}
function applyDrag(e){}
function doDown(e){}
function doMove(e){}
function doUp(e){}
function clearDragging(e){}
//draggable对象
$.fn.draggable = function(options, param){}
//draggable内置方法
$.fn.draggable.methods = {}
//draggable内置属性
$.fn.draggable.default = {}
//draggable内置处理写在DOM中属性的方法
//如：<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;"></div>
$.fn.draggable.parseOptions = function(target){}
//draggable用来标记是否正在拖动的属性
$.fn.draggable.isDragging = false
})(jQuery)
二. 具体分析
1. $.fn.draggable(options, param)
- 触发
（1）JS调用$(target).draggable({..})： 直接触发
（2）使用class="easyui-draggable"：通过$.fn.parser触发
ps：如果同时给同一个元素使用
$(target).draggable({..})和class="easyui-draggable"就会调用两次
- 大致结构
//draggable对象
//options 传入的参数对象
$.fn.draggable = function(options, param){
//这里为什么要用each,而不是直接处理： 传入的jq对象可能为$(".dd")，length>1
return this.each(function(){
var opts;
//如果之前该draggable组件有绑定过数据draggable，就取消之前的操作，重新进行处理
//什么情况下state不为undefined: 当同时使用$(target).draggable({..})和class="esayui-draggable"时，第二次调用的state不为undefined
var state = $.data(this, 'draggable')
if(state){
state.handle.unbind(".draggable");
opts = $.extends(state.options, options);
}
else{
opts = $.extends({}, $.fn.draggable.defaults, $.fn.draggable.parseOptions(this), options || {});
}
//handle为draggable组件中可拖动的部分
//$(opts.handle, this): handle一定要在draggable组件之中
//如果没有设置handle，则整个容器豆可以拖动
var handle = opts.handle ? (typeof opts.handle == 'string' ? $(opts.handle, this) : opts.handle) : $(this)
//给draggable绑定draggable数据
$.data(this, 'draggable', {
options: opts,
handle: handle
})
//如果设置了disabled为true,就不设置拖动
if(opts.disabled){
$(this).css('cursor', '');
return;
}
//绑定拖动相关的mouse方法
handle.unbind('.draggable').bind('mousemove.draggable', {target: this}, function(e){
//mousemove: 鼠标移动到handle上，且handle为拖动状态时，切换鼠标为【拖动】状态
}).bind('mouseleave.draggable', {target: this}, function(e){
//mouseleave: 鼠标离开handle时,切换鼠标为【箭头】状态
}).bind('mousedown.draggable', {target: this}, function(e){
//mousedown: 鼠标在handle上按下时，切换鼠标为【箭头】状态, 判断draggable组件的位置
})
//检查handle是否能被拖动
function checkArea(e){
//...
}
})
}
三、大致思路分析
1. 基本拖动实现
<html>
<head>
<meta charset="utf-8">
<style>
#draggableBox{
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="draggableBox"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#draggableBox").bind("mousemove.draggable",function(e){
console.log("box move");
}).bind("mouseleave.draggable",function(e){
console.log("box leave");
}).bind("mousedown.draggable",function(e){
console.log("box down");
//设置在html中拖动
$("html").bind("mousemove.draggable",function(e){
console.log("html move");
console.log(e.pageX,e.pageY)
$("#draggableBox").offset({
//这里的10只是随便的数字，当为0时,移动draggableBox时，鼠标指在draggableBox的左上角，现在我们只需要计算代替10的这个数字
left: e.pageX - 10,
top: e.pageY - 10
})
}).bind("mousedown.draggable",function(e){
console.log("html down");
}).bind("mouseup.draggable",function(e){
console.log("html up");
//鼠标松开后取消html绑定，并将draggableBox放置
$("html").unbind(".draggable")
})
})
</script>
</body>
</html>
效果.gif
2. 位置计算
上一步已经实现了大概的拖动，还有一个问题：鼠标不管首先点击在div的任何位置，拖动时都会移动到左上角。所以这里我们还要在$("#draggableBox").offset({left: e.pageX - 10,top: e.pageY - 10})的基础上具体计算鼠标在元素上的位置。
$("#draggableBox").bind("mousedown.draggable",function(e){
console.log("box down");
//记录此时鼠标相对于draggableBox元素的位置
var targetPosition = {
offsetX: e.offsetX,
offsetY: e.offsetY
}
//设置在html中拖动
$("html").bind("mousemove.draggable",targetPosition,function(e){
console.log("html move");
console.log(e.pageX,e.pageY)
$("#draggableBox").offset({
left: e.pageX - targetPosition.offsetX,
top: e.pageY - targetPosition.offsetY
})
}).bind("mousedown.draggable",function(e){
console.log("html down");
}).bind("mouseup.draggable",function(e){
console.log("html up");
//鼠标松开后取消html绑定，并将draggableBox放置
$("html").unbind(".draggable")
})
})
效果图.gif
网友评论