Jquery 单击子对象时是否拖动可拖动对象？

如果这意味着单击子元素（如

），是否可以使其在拖动表上的任意位置单击

我有一本书。请注意，如果单击“选择文件”按钮或显示“未选择文件”的文本，则无法拖动元素

我希望能够单击我的

draggable

容器上的任意位置并拖动元素，即使我单击了“选择文件”按钮。我可以理解单击事件是在按钮上触发的，可能不是可拖动的，但是为什么它适用于下面的

？我可以单击标签文本上的任意位置并将其拖动

我还认为可能会将我的可拖动容器的

z-index

更改为高于子元素，以便单击可以在那里注册，但这并没有改变任何内容：

<div class="draggable">
    <input type="file" style="z-index:1"/>
</div>

.draggable{
    border: 1px solid black;
    z-index:2;
}

.拖拉{
边框：1px纯黑；
z指数：2；
}

---

是否有某种方法可以将我的可拖动容器设置为透明覆盖，以便您始终单击它（从而可以拖动）？我意识到这将使

成为只读，最终无法使用，但这正是我在这个场景中需要的。

您应该调度事件：

有关更预期的行为，请参阅：

编辑以下关于jQuery UI可排序的评论：

让已调度事件冒泡到可排序容器：

---

你的副手是我要找的。谢谢如果您使用的是

sortable

而不是

draggable

，该怎么办？我不能让它以同样的方式工作。你能看看这把小提琴吗？您需要允许调度事件冒泡到容器级别（第二个参数设置为true）：

mdown.initMouseEvent（“mousedown”，true，true，window，0，e.screenX，e.screenY，e.clientX，e.clientY，true，false，true，0，null）
$(".draggable").draggable();
$(".draggable input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
});

$(".draggable").draggable({
    start: function( event, ui ) {
       $(this).data('preventBehaviour', true);
    }
});
$(".draggable input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function(e){
    var $draggable = $(this).closest('.draggable');
    if($draggable.data("preventBehaviour")){
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});

mdown.initMouseEvent("mousedown", true, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
$(this).closest('.item')[0].dispatchEvent(mdown);