javascript - 取消KendoUI可拖动的子对象

Question

如何在下面的示例中取消拖动绿色 div 对象

例如: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;   
}

我想要一些选项作为 JQueryUI 可拖动取消选项作为取消选项

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

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

我尝试重置对象的默认事件，但如果输入“.not-drag”，文本区域会失败，因为我无法将它们编辑为默认值

$('.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 事件冒泡到可拖动元素。而且您只需要 mousedown 和 mouseup。

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

这是更新后的演示:http://jsfiddle.net/86yTG/4/