單擊孩子時拖動可拖動？

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