JqueryUI, arrastre los elementos a las celdas de un div desplegable desplazable que contiene la tabla grande

Question

Estoy frente a un problema de arrastrar/soltar.

Quiero ver siempre el elemento que se está arrastrando, y quiero poder desplazar un div específico para soltar el elemento en cualquier celda de mi tabla. También quiero poder arrastrar elementos desde cualquier div a cualquier div.

Este ejemplo funciona casi bien. Mi último problema es sobre la propiedad de la celda hoverClass: cuando estoy arrastrando un elemento desde el "contenedor A" cerca del borde del "contenedor B", implementé un comportamiento de desplazamiento automático para navegar en mi tabla y llegar a cualquier celda. Pero, después de la simulación de desplazamiento, el hoverClass no se aplica a la celda derecha. Sin embargo, el elemento siempre se coloca en la celda derecha.

https://jsfiddle.net/Bouillou/QvRjL/434/

es correcta mi enfoque?

EDITAR

He encontrado una solución. La idea es agregar el clon de elemento al contenedor desplazable durante la devolución de llamada de construcción auxiliar, luego anexar el ayudante al cuerpo utilizando una función setTimeout después de 1ms. La posición de ayudante debe asignarse en la posición del mouse para evitar el problema de compensación.

Aquí está mi solución final: https://jsfiddle.net/Bouillou/QvRjL/434/

Estoy seguro de que es posible desarrollar una mejor manera de hacer eso.

Answer 1

Al parecer, mi actualización es la única solución.

Funciona desde hace meses sin problemas.

Encontré una solución. La idea es agregar el clon del elemento al contenedor desplazable durante la devolución de llamada de construcción auxiliar, luego anexar el ayudante al cuerpo usando una función setTimeout después de 1ms. La posición de ayudante debe asignarse en la posición del mouse para evitar el problema de compensación.

Aquí está mi solución: http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still bellonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});​ 

Answer 2

Si i undestand correctamente, después de desplazarse, las highlitedcells no es el más adecuado ..

Me parece que calcualtes la célula para destacar de su elemento contenedor pero luego replicar de posición dentro del elemento de la tabla.

Basílica, comprueba el desplazamiento del mouse desde el 'contenedor2' y luego coloca la celda en el desplazamiento pero desde la posición 't' de la mesa.

Aproveche la oportunidad y use la posición en lugar de la compensación. y mencionó en http://api.jquery.com/offset/, método

El .offset() nos permite recuperar la posición actual de un elemento con respecto al documento. Contraste esto con .position(), que recupera la posición actual relativa al origen del desplazamiento.

Personnaly simplemente aplicaría una clase css a las celdas y usar css: hover./EDITAR: si la única razón por la que necesitas hacer eso es resaltar la celda ... quizás quieras activar otras cosas también.