easyui源码2——draggable

文档：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

easyui源码2——draggable

一. 结构分析

二. 具体分析

1. $.fn.draggable(options, param)

三、大致思路分析

1. 基本拖动实现

2. 位置计算

1. `$.fn.draggable(options, param)`