Como dice el título, quiero deshabilitar el evento de "arrastrar" para los elementos secundarios de un elemento principal que se puede arrastrar. Esto puede sonar como una pregunta simple, pero probé diferentes enfoques sin éxito. Lo que intenté hasta ahora (nada funcionó):
event.target o datos similares para encontrar a los niños y detenerlo (no puedo encontrar a los niños)z-index en 0 en cssAquí está mi ejemplo de código. Primero debe arrastrar/soltar los elementos en el campo. Cuando escribe algo en los nuevos campos de entrada e intenta resaltarlo, el evento de arrastre se activará en su lugar. Ese es el problema principal que tengo: https://jsfiddle.net/5nt7jqyf/
No tendría este problema con jquery ui arrastrable ya que event.target se llena con la referencia infantil, pero no quiero usar la biblioteca y ceñirme a la solución html5 nativa.
Puede deshabilitar temporalmente el atributo draggable cuando el objetivo de input desencadena el evento, para esto debe agregar en el body un oyente de pointerdown y deshabilitar el atributo allí, también un oyente de pointerup donde lo habilitará nuevamente:
pointerdown: function(e) { if (e.target.tagName === 'INPUT') jQuery(this).attr('draggable', null); }, pointerup: function(e) { if (!jQuery(this).attr('draggable')) jQuery(this).attr('draggable', true); }