Question

In this plunk我有一个包含readonly输入字段的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 供您参考

在jQuery UI中拖动输入文本可拖动

1 个答案: