jquery UI ordinabile: come posso modificare l'aspetto dell'oggetto "segnaposto"?

Question

Nell'esempio indicato in http://jqueryui.com/demos/sortable/#placeholder il segnaposto è la casella arancione visualizzata quando si trascina uno degli elementi.

Questo elemento può essere modificato utilizzando l'opzione placeholder - ma permette solo di modificare la classe dell'elemento, come descritto qui: http://jqueryui.com/demos/sortable/#options

vorrei personalizzare questo elemento in più, per esempio fornendo una funzione all'opzione placeholder nello stesso modo in cui è possibile fornire una funzione all'opzione helper.

Cosa dovrei cambiare (ad esempio in sortable.js) per fare ciò?

Answer 1

Guardando la fonte per ui.sortable.js (1.7.2), si può imbrogliare e impostare il placeholder ad un oggetto con una funzione element e una funzione update. La funzione element viene utilizzata per restituire l'oggetto dom segnaposto e la funzione update consente di eseguire operazioni come correggere le sue dimensioni (è possibile controllare la funzione _createPlaceholder all'interno di sortable se si desidera visualizzare l'implementazione predefinita).

Così, per esempio, il seguente sarà creare un elemento di lista con la parola prova all'interno come segnaposto (si noti che restituisce l'oggetto vero e proprio dom ([0]) e non l'oggetto jQuery stesso):

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

Se sto leggendo la fonte correttamente, la funzione element deve essere passata all'elemento corrente (oggetto jQuery) e this dovrebbe puntare allo stesso sortable (ovvero $("#sortable") in questa istanza). In update si passa il "contenitore" che è l'oggetto che contiene tutte le opzioni, & l'elemento, ecc. & il placeholder stesso.

Si prega di notare che questo è un trucco non documentato, quindi sarebbe ovviamente supportato & potrebbe cambiare con la prossima versione di jQuery UI ... ma ancora può essere utile a voi, dato che stavi parlando di modifica ui.sortable.js direttamente comunque.

Spero che questo aiuti.

Answer 2

Un approccio più hacker che ho trovato: uno può utilizzare l'opzione start per modificare l'elemento segnaposto, ad es. come segue

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