Question

是否可以点击可拖动的任意位置，如果这意味着点击<input type="file"/>等子元素？

我有一个demo fiddle of what I mean here。请注意，如果单击“选择文件”按钮或“未选择文件”的文本，则无法拖动元素。

我希望能够点击draggable容器上的任意位置并拖动元素，即使我点击“选择文件”按钮也是如此。我可以理解点击事件是在按钮上触发，可能不是可拖动的，但为什么它适用于下面的<label>？我可以点击标签文本的任意位置并拖动它。

我还想过可能会将我的可拖动容器的z-index更改为高于子元素，这样点击就可以在那里注册，但这并没有改变任何东西：

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

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

是否有某种方法可以将我的可拖动容器设置为透明覆盖，以便您始终单击（因此可以拖动）？我意识到这会使<input type="file"/>只读并最终无法使用，但这正是我在这种情况下所需要的。

Answer 1

你应该派遣事件：

DEMO jsFiddle

$(".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);
});

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

DEMO jsFiddle (complete)

$(".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)
    }
});

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

将调度事件气泡发送到可排序容器：

SORTABLE DEMO

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);

单击子项时拖动拖动？

1 个答案: