jeditable desencadenando accidentalmente en Draggable en elementos nesteds

Estoy usando el arrastre de jquery-ui para drag and drop, y jeditable para la edición en línea.

Cuando arrastro y suelto un elemento que también se puede editar, justo después de que se suelte, jeditable entra y aparece en el 'modo de edición'.

¿Cómo puedo desactivar este comportamiento?

Editar – el problema ocurre debido a netsting – vea este ejemplo . También agregué arrastrable a la mezcla para hacer el ejemplo más realist (el verdadero problema real es en este sitio en el que estoy trabajando)

Nota : aunque esta pregunta tiene una respuesta aceptada debido a las reglas de recompensa, el problema aún no se resuelve para mí.

5 Solutions collect form web for “jeditable desencadenando accidentalmente en Draggable en elementos nesteds”

ACTUALIZADO 2: use niños ()

DEMO 2: http://jsbin.com/izaje3/2

en respuesta a tu comentario

$(function() { $('.editable').editable(); $('.draggable').draggable({ drag: function(event, ui) { $(this).children('div').removeClass('editable') }, stop: function(event, ui) { $(this).children('div').addClass('editable') } }); });​ 

DEMO: http://jsbin.com/ihojo/2

 $(function() { $(".draggable").draggable({ drag: function(event, ui) { $(this).unbind('editable') } }); $(".editable").editable(); }); 

O puedes hacer esto:

 $(function() { $('.editable').editable(); $('.draggable').draggable({ drag: function(event, ui) { $(this).removeClass('editable') }, stop: function(event, ui) { $(this).addClass('editable') } }); }); 

Asumiendo que tienes algo como esto:

 <div class="draggable editable"></div> 

NOTA: ¡ solo por el bien, también puede aprovechar el método del mango!

http://jqueryui.com/demos/draggable/#handle

Encontré esta publicación porque hoy encontré este problema exacto (nested jEditable dentro de una UQ de jQuery arrastrable); aunque no creo que mi solución sea particularmente elegante, sentí que debería compartirla en caso de que alguien tenga el mismo problema.

En lugar de tratar de desvincular y reiniciar el jEditable en los events de arrastre (que parece disparar el evento click DESPUÉS de la reinitialization en stop ()), me pareció más fácil configurar el jEditable para usar un evento personalizado que solo se desencadena en el mouseup si el arrastrable no fue arrastrado (simulando un clic).

La function anónima como el primer argumento de editable debe replacese con la url a la que está realizando la publicación, si eso es lo suyo.

http://jsbin.com/izaje3/13

 var notdragged = true; $('.editable').editable(function(value, settings) { return value; }, {event : 'custom_event' }); $('.draggable').draggable({ start: function(event, ui) { notdragged = false; } }); $('.editable').bind('mousedown', function() { notdragged = true; }).bind('mouseup', function() { if (notdragged) { $(this).trigger("custom_event"); } }); 

oftomh, debería tratar de get un control del object Event dentro del controller de event.preventDefault() , y luego tratar de llamar a event.preventDefault() , event.stopImmediatePropagation() o event.stopPropagation()

Afortunadamente para ti estás en jQuery. Hacerlo a través del browser con JS vainilla es molesto.

Destripador,

Una solución posible es utilizar el evento de doble clic para su componente editable.

Para hacer esto, simplemente inicialice el object editable con la siguiente opción:

 event: 'dblclick' 

Podría intentar configurar contenteditable = "false" en estos elementos. Simplemente intente agregar este atributo en la label html relevante y vea qué sucedió.

  • ¿Hay un control deslizante javascript (jquery) que limite los valores independientemente de los valores de visualización?
  • ¿Cómo mostrar el post después de que se haya eliminado todo elemento arrastrable?
  • ¿Cómo desplazarse hasta la parte inferior de la ul?
  • ¿Cómo oculto la navigation siguiente / actual / anterior en jQuery DatePicker y apago las animaciones?
  • El método jQuery attr puede establecer el manejador de clics y el text interno
  • Programe programáticamente un evento de "arrastre" de arrastre de jQuery-UI
  • Seleccionar el primer resultado de la IU de jquery automáticamente
  • Jquery vs Google Closure va GWT Pros y contras para el desarrollo de grandes aplicaciones web
  • Anular la function "privada" en JavaScript
  • jQuery slideDown vs. jQuery UI .show ('diapositiva')
  • ¿Cómo cerrar un cuadro de dialog modal de jQuery UI haciendo clic fuera del área cubierta por el cuadro?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.