在 jQuery UI 中拖动输入文本

Question

In this plunk 我有一个包含只读输入字段的 div。我使用 jQuery UI 使 div 可拖动。

当我拖动输入字段未隐藏的部分时，它工作正常（尝试拖动橙色区域）。但是当我尝试通过拖动输入字段来拖动 div 时，div 不会移动。即使鼠标位于 div 中包含的任何元素上，我也需要拖动 div。这可能吗？

Javascript：

$(function() {
    var div1 = $('#div1');
    div1.draggable();
    var input1 = $('<input type="text" readonly value="Some Text" style="position:absolute;top:0;left:0;border:0">');
    input1.appendTo(div1);   
})

Answer 1

我想这就是你需要的

$(function() {
    var div1 = $('#div1');
    var input1 = $('<input type="text" readonly value="Some Text" style="position:absolute;top:0;left:0;border:0">');
    input1.appendTo(div1);   
    $('#div1').draggable({
                cancel: ''
    });
});

基本上cancel 选项的作用是取消拖动选项 关于里面提到的那些元素。既然你不想取消 在任何子元素上拖动选项，只需将其留空即可。

您可以在 this 和 this 链接和 这是Working Plunk供您参考