Question

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

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 draggable cancle选项

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

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

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

以下是更新的演示：http://jsfiddle.net/86yTG/4/

取消KendoUI可拖动的子对象

1 个答案: