Question

我有一个指令，我想添加到div而不是它的子div。我想要一个div可拖动，以便这个div是可拖动的，它的子div被拖动。但是我不希望子div能够拖动它的父div。

这是HTML模板

<div div-draggable id="chColorPickerWrapper">
    <div>
        <div id="colorDiv"> </div>    
        <div id="whiteToTransparent"> </div>
        <div id="blackToTransparent"> </div>
    </div>
</div>

这是指令

chDirectives.directive('divDraggable',['$document', function($document){
    return{
        restrict: 'A',
        link : link
    };

    function link(scope,element,attrs)
    {
        var startX = 0;
        var startY = 0;
        var x = 0;
        var y = 0;

        var mouseMove = function(event) {
            event.preventDefault();
            y = event.pageY - startY;
            x = event.pageX - startX;

            element.css({
                top: y + 'px',
                left:  x + 'px'
            });
        }

        var mouseUp = function() {
            console.log('UNBIND');
            $document.off('mousemove', mouseMove);
            $document.off('mouseup', mouseUp);
        }

        var mouseDown = function(event){
            console.log('mouseDown');
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on('mousemove', mouseMove);
            $document.on('mouseup', mouseUp);
        }


        element.bind('mousedown',mouseDown);
        element.css({
            position: 'relative',
            cursor: 'pointer',
            display: 'block',
        });        
    }
}]);

当我点击colorDiv时，我不希望它可以拖动。我怎样才能覆盖或删除子div的这种行为？

如果您有任何建议可以让我的代码更好，我也会很感激，因为我对angularjs相当新鲜

编辑：这是一个例子： http://plnkr.co/edit/K52DDXQRCME7S3oMimoC

Answer 1

在mouseDown处理程序中，您需要检查event.target是否为可拖动元素：

   var mouseDown = function(event){
            console.log('mouseDown');
            event.preventDefault();
            if( event.target === element ) {
              startX = event.pageX - x;
              startY = event.pageY - y;
              $document.on('mousemove', mouseMove);
              $document.on('mouseup', mouseUp);
            }
        }

角度指令不适用于子元素

1 个答案: