Question

我有这个插件来处理拖动鼠标（而不是内容），并且在开始拖动处理程序中我正在创建另一个元素来触发拖动并停止父级但是它不起作用（父级仍在调用dragHandler）：
（原因是这样我可以缩放/平移拖动鼠标。）
在mousedown上调用 start ，mousedown也会注册mousemove等的监听器在mouseup上调用 end ，这也会删除侦听器。

http://jsfiddle.net/62XZU/7/

<svg></svg>

插件：

(function($) {
    $.fn.ondrag = function(opt) {
        //console.log("set drag");
        var obj = this;
        opt = $.extend({start:null,drag:null,end:null,leave:null,dropElement:document}, opt);
        this.data('ondrag',opt);

        opt.dragHandler = function(e){ if (opt.drag) opt.drag.call(obj); e.stopPropagation(); };
        opt.leaveHandler = function(e){ if (opt.leave) opt.leave.call(obj); e.stopPropagation(); };
        opt.startHandler = function(e){
            if (opt.start) opt.start.call(obj); 
            $(document).on("mousemove",opt.dragHandler); 
            $(document.body).on("mouseleave",opt.leaveHandler); 
            $(document).on("mouseup",opt.endHandler); e.stopPropagation(); };
        opt.endHandler = function(e){ 
            if (opt.end) opt.end.call(obj); 
            $(document).off("mousemove",opt.dragHandler); 
            $(document.body).off("mouseleave",opt.leaveHandler); 
            $(document).off("mouseup",opt.endHandler); e.stopPropagation(); };
        this.on("mousedown",opt.startHandler);
        opt.stopdrag = function(){ //this should remove the svg listeners to stop dragging
            console.log("stop dragging", opt.drag);
            if (opt.end) opt.end.call(obj);
            $(document).off("mousemove",opt.dragHandler);
            $(document.body).off("mouseleave",opt.leaveHandler);
            $(document).off("mouseup",opt.endHandler);
        };

        return this;
    };
})(jQuery);

实现：

$('svg').ondrag({
    start: function(){
        if (event.which==1) {//pan on left click
        } else { //create new element with drag and svg stop dragging
            console.log("started dragging on svg");
            $(document).trigger("mouseup"); //not working (svg is still dragging)
            this.data('ondrag').stopdrag(); //not working
            $(document.createElementNS('http://www.w3.org/2000/svg', 'circle'))
                .attr({r:50,fill:"lightgray",cx:"50%",cy:"50%"})
                .ondrag({
                    start:function(){ console.log("started dragging circle"); }, 
                    drag:function(){ console.log("dragging circle"); }
                }).appendTo(this).trigger("mousedown");
        }
    }, drag: function(){ console.log("dragging on svg"); }
});

Answer 1

问题是你在绑定鼠标处理程序之前调用你的启动函数，所以你的停止函数没有任何解除绑定。

http://jsfiddle.net/62XZU/6/

(function($) {
    $.fn.ondrag = function(opt) {
        //console.log("set drag");
        var obj = this;
        opt = $.extend({start:null,drag:null,end:null,leave:null,dropElement:document}, opt);
        this.data('ondrag',opt);

        opt.dragHandler = function(e){ if (opt.drag) opt.drag.call(obj); e.stopPropagation(); };
        opt.leaveHandler = function(e){ if (opt.leave) opt.leave.call(obj); e.stopPropagation(); };
        opt.startHandler = function(e){
            $(document).on("mousemove",opt.dragHandler); 
            $(document.body).on("mouseleave",opt.leaveHandler); 
            $(document).on("mouseup",opt.endHandler);
            if (opt.start) opt.start.call(obj); 
            e.stopPropagation();
        };
        opt.endHandler = function(e){ 
            opt.stopdrag();
            e.stopPropagation();
        };
        this.on("mousedown",opt.startHandler);
        opt.stopdrag = function(){
            console.log("stop dragging", opt.drag);
            $(document).off("mousemove",opt.dragHandler); 
            $(document.body).off("mouseleave",opt.leaveHandler); 
            $(document).off("mouseup",opt.endHandler);
            if (opt.end) opt.end.call(obj);
        };

        return this;
    };
})(jQuery);

您需要做的就是将回调移至开/关电话下方的开始/结束位置。

使用jQuery拖动时如何处理停止事件？

1 个答案: