jQuery UI, Sortable combinación con Soltable

Question

Estoy tratando de combinar jQuery UI sortable con lanzables para crear varias páginas para dejar caer y ordenar las cosas. He fijado una entrada de blog con un stand-a lo largo de demostración aquí:

http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/

y aquí es un jsFiddle:

http://jsfiddle.net/VUuyx/

Tenga en cuenta que puede arrastrar a ordenar las cajas, incluso en otras columnas También puede hacer clic en los botones de página para cambiar de página. Mi problema radica en la combinación de estas dos características:

Mediante el uso de lanzables, me he permitido al usuario arrastrar una caja a un botón página, la página cambiará entonces, y el usuario puede terminar arrastrándolo hasta la página recién revelada. El problema es que cuando la página cambia, la primera columna que aparece debajo del cuadro arrastrado no tiene su sobre evento de incendio. Tienes que arrastrar a otra columna, y luego volver a la primera columna para que aparezca el marcador de posición.

No estoy seguro, pero creo que necesito borrar los eventos de algún modo, o dispararlos manualmente. El problema parece provenir del hecho de que el cuadro arrastrado está sobre la columna cuando se hace visible.

¿Puede ayudar con este dilema esotérico?

Gracias!

Actualización:

Así que han estado considerando alternativas para resolver esto. Michal sugirió activar el método de actualización, que de hecho no resuelve el problema, pero me hizo pensar en los problemas del evento.

Parece que cuando mueves el mouse y luego de nuevo, se activan los eventos adecuados. Quizás si puedo disparar manualmente el evento mouseout para la primera columna, el restablecimiento permitirá que el evento mouseover se dispare correctamente.

yo probamos este:

$(".column:first").trigger('mouseout'); 

Pero no creo que esto es lo mismo que se pueden ordenar el evento de salida. Tal vez debería disparar ese evento?

Answer 1

Sí, agregando $ ('. Column'). Sortable ("refresh"); al final de la función show_page (id) trabajó para mí (sólo probado en Firefox campo de minas):

function show_page(id) { 
    $('.page').removeClass('page_active'); 
    $('#page_'+id).addClass('page_active'); 
    $('.column').sortable("refresh"); 
} 

Answer 2

Tal vez yo soy la mala interpretación del problema, pero no creo que tenga nada que ver con el " cambio de página ". Si enciende ambas páginas al mismo tiempo e intenta arrastrar el "Recuadro 1" a una posición arriba del "Recuadro 4", verá que no activa que el ordenable del "Recuadro 4" haya recibido el Arrastrable hasta va debajo de "Caja 4". Esto no resuelve su problema, pero quizás lo ayude a buscar una mejor área para la solución.

Consulte http://jsfiddle.net/nkBNP/7/ para obtener un JSFiddle que demuestre lo que quiero decir.

Answer 3

Al menos para la caída de arriba hacia abajo en Creo que la solución está en algún lugar en la configuración de la clase de caja a y vincularlo al objeto ordenable.

$(".box").draggable({ 
    tolerance: 'point', 
    connectToSortable: '.column', 
    snap:false, 
    helper : 'clone', 
}); 

En este ejemplo se crea un duplicado de la caja, pero sí permite a mí cuadro 1 para arrastrar hasta la página 2 y arrastre lentamente hacia abajo por encima de la caja 5 y obtener coloca en el primer lugar. Sin embargo, es muy sensible. Es posible que deba ajustar las cuadrículas y ajustar para que funcione de forma coherente para el usuario ocasional.

Ciertamente, puedo imaginar que un objeto ordenable no esperaría que algo bajara desde la parte superior, porque espera que las cosas se clasifiquen desde el contenedor. Droppable, por otro lado, espera que las cosas entren desde cualquier dirección.

Answer 4

Añadiendo @ respuesta de edtechdev a tolerance: 'intersect producido algo que pensé que podría satisfacer sus exigencias, Whit:

$(".column").sortable({ 
    connectWith: '.column', 
    opacity: 0.4, 
    tolerance: 'intersect', //<--changed 
    placeholder: 'place_holder', 
    helper: function(event, el) { 
     var myclone = el.clone(); 
     $('body').append(myclone); 
     return myclone; 
    }, 
}).disableSelection(); 

// ... 

function show_page(id) { 
    $('.page').removeClass('page_active'); 
    $('#page_'+id).addClass('page_active'); 
    $('#page_'+id).find('.column:first').sortable('refresh'); //<- added 
} 

Answer 5

Salida arrastrar y soltar portal construido utilizando jQuery y Asp.Net MVC, todo ha implantación en las entradas del blog: http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/

Answer 6

ordenable tiene una opción no documentada refreshPositions que actualiza automáticamente la posición de sus elementos extraíbles cuando también se pueden ordenar. Esto evita que el marcador de posición sea droppable en lugar del droppable real.