CODEWITHSUNDEEP
javascriptjquery-uikendo-uidraggable
Hiếp me
Hiếp me

Reputation: 125

Cancel children object of KendoUI draggable

how to cancel drag green div object in bellow example

ex: http://jsfiddle.net/86yTG/3/

html:

<div class="drag">
    <div class="not-drag"></div>
</div>

js:

$(document).ready(function () {
    $('.drag').kendoDraggable({
        hint: function(e){
            return e.clone();
        }
    });
});

css:

.drag{
    width: 300px;
    height: 200px;
    background-color: red;
}
.not-drag{
    width: 100px;
    height: 50px;
    background-color: green;   
}

I want some option as cancel option as JQueryUI draggable cancle option

http://jqueryui.com/draggable/#handle

 $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });

I try to reset default event of object,but it's failure if ".not-drag" is input, textarea because i can't edit them as default

$('.drag').on('mouseenter mouseover mousemove mouseout mouseleave click dblclick change dragstart hold dragend dragcancel drag', '.not-drag', function(e) {
        console.debug(e);
        e.preventDefault();
        e.stopPropagation();
    });

or :

$('.drag').off('mouseenter mouseover mousemove mouseout mouseleave click dblclick change dragstart hold dragend dragcancel drag', '.not-drag');

Upvotes: 2

Views: 181

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

You almost got it! The problem is that you were calling e.preventDefault() which disables input editing. You only need e.stopPropagation() to avoid DOM events bubbling to the draggable element. And you only need mousedown and mouseup.

$('.drag').on('mousedown mouseup', '.not-drag', function(e) {
    e.stopPropagation();
});

Here is the updated demo: http://jsfiddle.net/86yTG/4/

Upvotes: 2

Related Questions