javascript - jq插件只能调用一次

Question

$.extend({
    pDrag:function(bar, target, callback){
        var params = {
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        
        var getCss = function(o,key){
            return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     
        };
        
        var startDrag = function(bar, target, callback){
            if(getCss(target, "left") !== "auto"){
                params.left = getCss(target, "left");
            }
            if(getCss(target, "top") !== "auto"){
                params.top = getCss(target, "top");
            }
            bar.onmousedown = function(event){
                params.flag = true;
                if(!event){
                    event = window.event;
        
                    bar.onselectstart = function(){
                        return false;
                    }  
                }
                var e = event;
                params.currentX = e.clientX;
                params.currentY = e.clientY;
            };
            document.onmouseup = function(){
                params.flag = false;    
                if(getCss(target, "left") !== "auto"){
                    params.left = getCss(target, "left");
                }
                if(getCss(target, "top") !== "auto"){
                    params.top = getCss(target, "top");
                }
            };
            document.onmousemove = function(event){
                var e = event ? event: window.event;
                if(params.flag){
                    var nowX = e.clientX, nowY = e.clientY;
                    var disX = nowX - params.currentX, disY = nowY - params.currentY;
                    target.style.left = parseInt(params.left) + disX + "px";
                    target.style.top = parseInt(params.top) + disY + "px";
                }
                
                if (typeof callback == "function") {
                    callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
                }
            }    
        };
    }
})

$.pDrag(bar1, target1, callback);

调用一次没问题，但是再调用一次 $.pDrag(bar2, target2, callback);，第一个p就拖拽不了，只能拖拽第二个p

Answer 1

看了一下代码,每次调用函数是通过document.onmousemove实现移动的,调用第二次后，第一次的自然就被覆盖了，所以只能实现第二个p

Answer 2

看看 document.onmouseup = function() 是否被成功调用了？

还有params.flag = true; 这个flag应该是鼠标点住的时候激活当前对象的flag。鼠标抬起事件里需要将这个flag设为false.

控制台跟踪观察下运行时候各个参数是否正常。

我感觉就是第二次点击选中p的时候，代码中没有设定它为当前操作对象。