jquery - examples - sortable js

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 se puede modificar utilizando la opción placeholder , pero solo le permite modificar la clase del elemento como se describe aquí: http://jqueryui.com/demos/sortable/#options

Me gustaría personalizar más este elemento, por ejemplo, suministrando 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é necesitaría cambiar (por ejemplo, en sortable.js) para hacer esto?

Answer 1

En cuanto a la fuente de ui.sortable.js (1.7.2), puede hacer trampa y establecer el placeholder de placeholder a un objeto con una función de element y una función de update . La función de element se utiliza para devolver el objeto dom de marcador de posición y la función de update 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).

Entonces, por ejemplo, lo siguiente creará un elemento de lista con la palabra test inside como su marcador de posición (tenga en cuenta que devuelve el objeto dom real ( [0] ) y no el objeto jQuery en sí mismo):

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

Si estoy leyendo la fuente correctamente, la función del element debe pasar el elemento actual (objeto jQuery) y this debe apuntar a la sortable misma (es decir $("#sortable") en esta instancia). En la update se pasa el "contenedor", que es el objeto que contiene todas las opciones, el elemento, etc. y el placeholder .

Tenga en cuenta que este es un truco no documentado , por lo que obviamente no será compatible y puede cambiar con la próxima versión de la interfaz de usuario de jQuery ... pero aún puede ser útil para usted, dado que estaba hablando de editar ui.sortable.js directamente de todas formas.

Espero que ayude.

Answer 2

Un enfoque más hackish que encontré: uno puede usar la opción de start para modificar el elemento marcador de posición, por ejemplo, de la siguiente manera

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