拖拽

在mousedown的handler函数里加上return false;就解决问题了

猜测选中文字的执行是根据mousedown的时候返回值和mousemove的返回值进行计算，从而知道哪些文字被选中。鼠标按下时将返回值设为false，就阻止了它计算的过程了。

一、js拖拽插件的原理

常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：

1、用鼠标点击被拖拽的元素

2、按住鼠标不放，移动鼠标

3、拖拽元素到一定位置，放开鼠标

这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：

1、用鼠标点击被拖拽的元素触发onmousedown

（1）设置当前元素的可拖拽为true，表示可以拖拽

（2）记录当前鼠标的坐标x,y

（3）记录当前元素的坐标x,y

2、移动鼠标触发onmousemove

（1）判断元素是否可拖拽，如果是则进入步骤2，否则直接返回

（2）如果元素可拖拽，则设置元素的坐标

元素的x坐标 = 鼠标移动的横向距离+元素本来的x坐标 = 鼠标现在的x坐标 - 鼠标之前的x坐标 + 元素本来的x坐标

元素的y坐标 = 鼠标移动的横向距离+元素本来的y坐标 = 鼠标现在的y坐标 - 鼠标之前的y坐标 + 元素本来的y坐标

3、放开鼠标触发onmouseup

（1）将鼠标的可拖拽状态设置成false

在实现基本的效果之前，有几点需要说明的：

1、元素想要被拖动，它的postion属性一定要是relative或absolute

2、通过event.clientX和event.clientY获取鼠标的坐标

3、onmousemove是绑定在document元素上而不是拖拽元素本身，这样能解决快速拖动造成的延迟或停止移动的问题

偶的实现

<div class="drag-div" id="drag-div">
    <div class="drag-header" id="drag-header">my header</div>
    <div class="drag-content">abc</div>
</div>
<div class="drag-div" id="drag-div2">
    <div class="drag-header" id="drag-header2">my header</div>
    <div class="drag-content">abc</div>
</div>
<script src="../js/libs/jquery-1.11.3.js"></script>
<script>




    $.fn.dragable = function (opt) {
        var defaultTargetContain = $(this);
        var defalut = {
            "targetContain": null,
            "callBack":null
        };
        var option = $.extend(defalut,opt);


        $(this).each(function () {
            var flag = false;
            var top,left,clientX,clientY,targetClientX,targerClientY;
            var targetObj = option.targetContain==null?$(this):$(option.targetContain);


            //元素postion
            $(targetObj).css({"position":"absolute"});
            //元素 鼠标
            $(this).css({"cursor":"move"})


            //绑定鼠标mousedown
            $(this).mousedown(function (e) {
                flag = true;
                top = $(this).offset().top;
                left = $(this).offset().left;
                clientX = e.clientX;
                clientY = e.clientY;
                return false;
            });


            $(document).mousemove(function (e) {
                if(flag){
                    targetClientX = e.clientX;
                    targerClientY = e.clientY;
                    var targetTop = top+(targerClientY-clientY);
                    var targetLeft = left+(targetClientX-clientX);
                    $(targetObj).offset({
                        "top":targetTop<0?0:targetTop,
                        "left":targetLeft<0?0:targetLeft
                    });
                }
            });
            $(document).mouseup( function () {
                flag=false;
            });
        });


    };




    $("#drag-header").dragable({
        "targetContain":"#drag-div"
    });


    $("#drag-header2").dragable({
        "targetContain":"#drag-div2"
    });


</script>