在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供您参考