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ó.

  • Error de JQuery: no se puede llamar a los methods en el dialog antes de la initialization; intentó llamar al método 'cerrar'
  • ¿Cómo puedo personalizar el formatting de los resultados del complemento Autocompletar?
  • Comprobando si jQueryUI ha cargado
  • jQuery: arrastre y suelte entre los divs mientras puede cambiar el tamaño del elemento
  • Controles deslizantes de jQuery UI: select superposition de controles deslizantes según la dirección de arrastre
  • keycode 13 es para cual key
  • comprobar si los methods de aceleración de la interfaz de usuario jQuery están disponibles
  • Pasar datos a un cuadro de dialog de jQuery UI
  • Ruby on Rails: cómo se ejecuta require en application.js
  • IE7 / 8 Javascript Gotchas
  • Las tabs jQuery parpadean (FOUC) cuando carga la página
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.