javascript - jQuery拖动时如何处理停止事件？

Question

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

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

问题是您在绑定(bind)鼠标处理程序之前先调用了启动函数，因此您的停止函数没有任何可解除绑定(bind)的东西。

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);

您需要做的就是将回调移动到开/关调用下方开始/结束。