¿Cómo puedo hacer que un elemento sea arrastrable, pero no sus elementos secundarios, usando jQuery UI?

Question

Por ejemplo, yo quiero tener esto:

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

Answer 1

Usted puede utilizar la opción cancel, que acepta un selector para elementos secundarios del objeto arrastrable que no se debe permitir que arrastra:

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

JS Fiddle demo .

Answer 2

Puede haber otros elementos como niños que p. En este caso hay que usar selector de espacio:

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

El ejemplo de trabajo está en JSFIDDLE.

Utiliza el selector de espacio, que selecciona todos los elementos secundarios, ya sean hijos o nietos. Ejemplo de selector de espacio en w3schools.

La desventaja de esto es que todos los nodos de texto deben estar dentro de la etiqueta, por ej. span, div, p. Si no están dentro de la etiqueta, el * selector no puede hacerlos coincidir. Para seguir siendo seleccionables los nodos de texto, debe usar un código más complejo, porque CSS y jQuery no contienen selector para los nodos de texto sin formato. Usted puede, por ej. usa tu propia etiqueta para envolver los nodos de texto. La razón de nodo personalizado es que disminuye la posibilidad de que este elemento personalizado a ser de estilo accidentalmente (como cuando se utiliza lapso etc.), en este caso lo llamamos 'costumbre':

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

Lo anterior en JSFIDDLE. Ahora también los tonos de texto simples son seleccionables. Las cosas cambian si agrega dinámicamente después más nodos de texto en el elemento arrastrable. Entonces tienes que envolverlos de nuevo.

Answer 3

Puede anular la función start como parte de las opciones para la inicialización. Devolver falso aquí saldrá prematuramente. Para acceder al evento del mouse creado al hacer clic, puede acceder a la propiedad originalEvent en el evento jQuery.

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

Esto permite que solo el padre sea arrastrable. Puedes reemplazar this con el elemento que quieras que sea el único elemento que se puede arrastrar, solo asegúrate de que sea el nodo dom el que se compare.

Plunkr example