jquery UI ordenable: ¿cómo puedo cambiar la apariencia del objeto "marcador de posición"?

Question

En el ejemplo dado en http://jqueryui.com/demos/sortable/#placeholder, el marcador de posición es el cuadro naranja que aparece al arrastrar cualquiera de los elementos.

Este elemento puede ser ajustado mediante la opción placeholder - pero sólo le permite modificar la clase del elemento como se describe aquí: http://jqueryui.com/demos/sortable/#options

quisiera personalizar este elemento más, por ejemplo, proporcionando una función a la opción placeholder de la misma manera que se puede suministrar una función a la opción helper.

¿Qué debería cambiar (por ejemplo, en sortable.js) para hacer esto?

Answer 1

En cuanto a la fuente de ui.sortable.js (1.7.2), se puede engañar y establecer el placeholder a un objeto con una función y una función elementupdate. La función element se usa para devolver el objeto dom marcador de posición y la función update le permite hacer cosas como corregir su tamaño (puede consultar la función _createPlaceholder dentro de ordenable si desea ver lo que hace la implementación predeterminada).

Así, por ejemplo, lo siguiente será crear un elemento de la lista con la palabra prueba el interior como su marcador de posición (observe que devuelve el objeto real dom ([0]) y no el objeto jQuery en sí):

$("#sortable").sortable({ 
    placeholder: { 
     element: function(currentItem) { 
      return $("<li><em>test</em></li>")[0]; 
     }, 
     update: function(container, p) { 
      return; 
     } 
    } 
}); 

Si leo la fuente correctamente, la función element se debe pasar al elemento actual (objeto jQuery) y this debe apuntar al sortable en sí (es decir, $("#sortable") en este caso). En update se le pasa el "contenedor" que es el objeto que contiene todas las opciones, & el elemento, etc. & el placeholder sí mismo.

Tenga en cuenta que este es un truco indocumentado, por lo que obviamente sería sin apoyo & puede cambiar con la próxima versión de jQuery UI ... pero todavía puede ser de utilidad para usted, teniendo en cuenta que estaba hablando acerca de la edición ui.sortable.js directamente de todos modos.

Espero que ayude.

Answer 2

Un enfoque más hackish que encontré: se puede usar la opción start para modificar el elemento marcador de posición, p. como sigue

$("#sortable").sortable({ 
    start: function (e, ui) { 
     // modify ui.placeholder however you like 
     ui.placeholder.html("I'm modifying the placeholder element!"); 
    } 
});