拖拽如何不影响当前子元素上的其他事件？

Question

拖拽如何不影响当前子元素上的其他事件？
实现拖拽后，子元素上的echarts的事件无效了？该如何处理？

实现如下

var drag = function drag(){
    this.dragWrap = $("#screenModal .modal-dialog");
    this.init.apply(this,arguments);
};
drag.prototype = {
    constructor:drag,
    _dom : {},
    _x : 0,
    _y : 0,
    _top :0,
    _left: 0,
    move : false,
    down : false,
    init : function () {
        this.bindEvent();
    },
    bindEvent : function () {
        var t = this;
        $('body').on('mousedown','#screenModal .modal-dialog',function(e){
            //e && e.preventDefault();
            if ( !t.move) {
            t.mouseDown(e);
            }
        });
        $('body').on('mouseup','#screenModal .modal-dialog',function(e){
            t.mouseUp(e);
        });

        $('body').on('mousemove','#screenModal .modal-dialog',function(e){
            if (t.down) {
            t.mouseMove(e);
            }
        });
    },
    mouseMove : function (e) {
        e && e.preventDefault();
        this.move = true;
        var x = this._x - e.clientX,
            y = this._y - e.clientY,
            dom = $('#screenModal .modal-dialog');
        dom.scrollLeft(this._left + x);
        dom.scrollTop(this._top + y);
    },
    mouseUp : function (e) {
        e && e.preventDefault();
        this.move = false;
        this.down = false;
        this.dragWrap.css('cursor','');
    },
    mouseDown : function (e) {
        this.move = false;
        this.down = true;
        this._x = e.clientX;
        this._y = e.clientY;
        this._top = $('#screenModal .modal-dialog').scrollTop();
        this._left = $('#screenModal .modal-dialog').scrollLeft();
        this.dragWrap.css('cursor','move');
        }
};
var drag = new drag();

Answer 1

不要把监听拖拽事件加载dialog上。要加在dialog的标题上。

var drag = function drag(){
    this.dragWrap = $("#screenModal .modal-dialog");
    this.init.apply(this,arguments);
};
drag.prototype = {
    constructor:drag,
    _dom : {},
    _x : 0,
    _y : 0,
    _top :0,
    _left: 0,
    move : false,
    down : false,
    init : function () {
        this.bindEvent();
    },
    bindEvent : function () {
        var t = this;
        // 举个例子，dialog的上边有个dialog-title用于显示对话框的标题
        $('body').on('mousedown','#screenModal .modal-dialog .modal-dialog-title',function(e){
            //e && e.preventDefault();
            if ( !t.move) {
            t.mouseDown(e);
            }
        });
        $('body').on('mouseup','#screenModal .modal-dialog',function(e){
            t.mouseUp(e);
        });

        $('body').on('mousemove','#screenModal .modal-dialog .modal-dialog-title',function(e){
            if (t.down) {
            t.mouseMove(e);
            }
        });
    },
    mouseMove : function (e) {
        e && e.preventDefault();
        this.move = true;
        var x = this._x - e.clientX,
            y = this._y - e.clientY,
            dom = $('#screenModal .modal-dialog');
        dom.scrollLeft(this._left + x);
        dom.scrollTop(this._top + y);
    },
    mouseUp : function (e) {
        e && e.preventDefault();
        this.move = false;
        this.down = false;
        this.dragWrap.css('cursor','');
    },
    mouseDown : function (e) {
        this.move = false;
        this.down = true;
        this._x = e.clientX;
        this._y = e.clientY;
        this._top = $('#screenModal .modal-dialog').scrollTop();
        this._left = $('#screenModal .modal-dialog').scrollLeft();
        this.dragWrap.css('cursor','move');
        }
};
var drag = new drag();