Angular Directive not for child element

Bongo

I have a directive which i want to add to a div but not to its child divs. I want a div to be draggable so that this div is draggable and its child divs are dragged with it. But i don't want the child divs to be able to drag its parent div.

Here is the HTML template

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

and here is the directive

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',
        });        
    }
}]);

When i click on the colorDiv i don't want it to be draggable. How can i overwrite or erase this behavior for the child divs ?

if you have any suggestions to make my code better i would appreciate that too, because i am fairly new to angularjs

EDIT: here is a example: http://plnkr.co/edit/K52DDXQRCME7S3oMimoC

c-smile

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Angular Directive not for child element

분류에서Dev

Angular Click outside of an element in directive

분류에서Dev

Prevent Angular JS Directive from Firing Twice when moving element

분류에서Dev

Binding AngularJS directive to element

분류에서Dev

directive element not showing

분류에서Dev

Problems with AngularJS directive child communication

분류에서Dev

Update data in angular directive

분류에서Dev

Angular directive modifying scope

분류에서Dev

angular order with directive

분류에서Dev

Angular directive checking active or not

분류에서Dev

Wrong scope when using $compile for a child directive

분류에서Dev

Angular directive showing in the wrong place

분류에서Dev

How to bind to `keydown` of another element in a directive

분류에서Dev

using jqlite to target nested directive element

분류에서Dev

How find and remove DOM element from directive?

분류에서Dev

Angular directive that requires another directive that uses an Attribute defined controller

분류에서Dev

Select last child with specific element

분류에서Dev

jQuery load .data to a child element

분류에서Dev

How to access ng-repeat item object into directive and child scope?

분류에서Dev

Angular Directive 여러 번 호출

분류에서Dev

problems creating a styled checkbox directive for angular app

분류에서Dev

Angular Directive 요소 문제

분류에서Dev

Is one of these the more "Angular" way of communicating with a directive?

분류에서Dev

Angular.js directive isolated scope not working

분류에서Dev

Angular Directive 부모 템플릿?

분류에서Dev

angular leaflet directive:: check if point is in polygon

분류에서Dev

Angular.js directive isolated scope not working

분류에서Dev

Creating custom angular directive for term.js

분류에서Dev

Use an Angular directive to generate html from an array

Related 관련 기사

뜨겁다태그

보관