Come posso rendere un elemento trascinabile, ma non i suoi elementi figli, usando l'interfaccia utente di jQuery?

Question

Per esempio, voglio avere questo:

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

Answer 1

È possibile utilizzare l'opzione cancel, che accetta un selettore per gli elementi figlio dell'oggetto trascinabile che non dovrebbe permettere il trascinamento:

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

JS Fiddle demo .

Answer 2

Ci possono essere altri elementi come bambini di p. In questo caso è necessario utilizzare il selettore spazio:

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

L'esempio di lavoro è a JSFIDDLE.

Utilizza il selettore di spazio, che seleziona tutti i figli di un elemento, siano essi bambini o nipoti. Esempio di selezione dello spazio allo w3schools.

Lo svantaggio di questo è che tutti i textnode devono essere racchiusi all'interno del tag, ad es. span, div, p. Se non sono all'interno del tag, il selettore * non può corrisponderli. Per rimanere selezionabili, è necessario utilizzare un codice più complesso, in quanto CSS e jQuery non contengono selettore per plain text node. Puoi es. usa il tuo tag per il wrapping di textnodes. La ragione di nodo personalizzato è che diminuisce la possibilità per questo elemento personalizzato da stile accidentalmente (come quando si usa campata ecc), in questo caso assegniamo il nome 'personalizzato':

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

la summenzionata JSFIDDLE. Ora anche i textNode sono selezionabili. Le cose cambiano se aggiungi dinamicamente più textnode nell'elemento trascinabile. Quindi devi avvolgerli di nuovo.

Answer 3

È possibile sovrascrivere la funzione start come parte delle opzioni di inizializzazione. Restituire il falso qui uscirà prematuramente. Per accedere all'evento del mouse creato quando si fa clic, è possibile accedere alla proprietà originalEvent sull'evento jQuery.

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

Ciò consente solo al genitore di essere trascinabile. Puoi sostituire this con qualsiasi elemento tu voglia essere l'unico oggetto trascinabile, ma assicurati che il nodo dom venga confrontato.

Plunkr example