Отменить дочерний объект KendoUI Draggable

Question

Как отменить перетаскивание зеленого объекта div в приведенном ниже примере

например: http://jsfiddle.net/86yTG/3/

HTML:

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

ЯШ:

$(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;   
}

Я хочу какую-то опцию как опцию отмены как опцию перетаскиваемого JQueryUI

http://jqueryui.com/draggable/

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

Я пытаюсь сбросить событие по умолчанию для объекта, но это сбой, если вводится ".not-drag", textarea, потому что я не могу редактировать их по умолчанию

$('.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();
    });

или же:

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

Answer 1

Вы почти получили это! Проблема в том, что ты звонил e.preventDefault() который отключает редактирование ввода. Вам нужно только e.stopPropagation() чтобы избежать появления событий DOM для перетаскиваемого элемента. И вам нужно только мусс и мышью.

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

Вот обновленная демка: http://jsfiddle.net/86yTG/4/