jquery - how to prevent the click event of the parent when its children is being dragged -
here 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 html code 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 child element dragged when stopped, still trigger click event of parent container.
you need stop propagation on draggable
element's mousedown
event:
$('.sticky_container').mousedown(function (event) { event.stoppropagation(); });
Comments
Post a Comment