如何使用jQuery UI使元素可拖動，但不能使用其子元素？

Question

例如，我想有這樣的：

<div class="draggable"> 
<p>Text that can be selected</p> 
</div> 

Answer 1

可以使用cancel選項，它接受一個選擇器可拖動對象的子元素，不應該允許拖動：

$('.draggable').draggable({cancel : 'p'}); 

JS Fiddle demo 。

Answer 2

可以有其他元素作爲孩子比p。在這種情況下，您必須使用空間選擇器：

$(".draggable").draggable({cancel: ".draggable *"}); 

工作示例爲JSFIDDLE。

它使用空間選擇器，選擇元素的所有子元素，無論他們是孩子還是大孩子。空間選擇器示例，位於w3schools。

這樣做的缺點是所有的textnode都必須包裝在標籤內，例如。 span，div，p。如果它們不在標籤內，則*選擇器無法匹配它們。爲了保持純文本節點可選，你必須使用更復雜的代碼，因爲CSS和jQuery不包含純文本節點的選擇器。你可以例如。使用你自己的標籤來包裝文本節點。其原因自定義節點是它降低了該自定義元件被意外樣式（使用跨度等時等）的可能性，在這種情況下，我們將其命名爲「自定義」：

$(".draggable").draggable({cancel:'.draggable *'}) 
.contents().filter(function() {return this.nodeType == Node.TEXT_NODE;}) 
.wrap('<custom></custom>'); 

上面在JSFIDDLE。現在也可以選擇純文本節點。如果您將更多文本節點動態添加到可拖動元素中，情況會發生變化。然後你必須再次包裝它們。

Answer 3

您可以覆蓋start函數作爲初始化選項的一部分。在這裏返回錯誤將會過早地發生。要訪問單擊時創建的鼠標事件，可以訪問jQuery事件中的originalEvent屬性。

$(".draggable").draggable({ 
    start: function(event, ui) { 
    return event.originalEvent.target === this; 
    } 
}); 

這允許只有父母是可拖動的。你可以用你想成爲唯一可拖動項目的任何元素替換this，只要確保它是獲得比較的DOM節點。

Plunkr example