CODEWITHSUNDEEP
jqueryjquery-ui
macmild gealogo
macmild gealogo

Reputation: 81

how to prevent the click event of the parent when its children is being dragged

Here is a sample code:

$('.bmc-div').click(function(e){
    e.stopPropagation();
    // console.log(e.target);
    if ($(e.target).hasClass('my-sticky')) {

    } else {
        canvas.add_sticky($(this));
    }
});

$('.bmc-div .sticky_container').sortable({
    cursor: 'move',
    revert: true,  
    helper: 'clone',
    // handle: ".element-handler",
    connectWith: '.bmc-div .sticky_container',
    scroll: true,
    cancel: null,
    opacity: 0.7,
    // axis: 'y',
    items: ".my-sticky",
    placeholder : "sticky-placeholder",
    containment: "#main",
    zIndex: 9999,
    start: function(event, ui) {
        event.stopPropagation();
    },
    stop: function(event, ui) {
        event.stopPropagation();
    },
    update: function(event, ui) {
        // update_sortable_position();
    }
}).disableSelection();

Here is the HTML Code for the question:

 <div id="bmc-rs" class="col-sm-12 bmc-div">
        <div class='bmc-row'>
             <p style='margin: 0px;'><span class="grid-label">Revenue Streams              </span><span class="pull-right"><i class="fa fa-briefcase"></i></span></p>
              </div>
              <div class="sticky_container">
                <div class="my-sticky" style="display: block;">Sample Sticky</div>
              </div>
            </div>

The problem is that the child element will be dragged but when stopped, it will still trigger the click event of the parent container.

Upvotes: 1

Views: 794

Answers (1)

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

You need to stop propagation on your draggable element's mousedown event:

$('.sticky_container').mousedown(function (event) {
    event.stopPropagation();
});

Upvotes: 2

Related Questions