risposta

8

Secondo il jQuery UI Sortable Documentation è possibile fornire una classe CSS per il segnaposto. Dovresti essere in grado di specificare lo sfondo in questa classe.

Utilizzando il segnaposto e la proprietà forcePlaceholderSize, funziona come un incantesimo. Ho aggiornato il jsfiddle link

Spero che questo aiuti.

+1

Grazie per aver dedicato del tempo per aiutare p0wl. Questa soluzione funziona davvero. Tuttavia utilizza una struttura/struttura di codice diversa da quella che cercavo, ovvero richiede la separazione dello stile in una classe CSS e l'ereditazione del parametro width con foreplaceholderSize impostato su true. Certo, fa il trucco, ma la soluzione delineata nella mia altra risposta (per gentile concessione di qualcun altro su IRC) richiede solo una riga aggiuntiva di codice jQuery da aggiungere al codice nella domanda originale. È abbastanza elegante. Forse l'hai trovato utile anche tu? Grazie comunque :) –

+0

Hai perfettamente ragione, ma dipende dal punto di vista. Mi piace separare tra javascript e css. Sebbene l'uso di un parametro standard di jquery-ui possa avere dei vantaggi (leggilo usando un metodo get ad esempio). – p0wl

+0

Sì, separare Javascript e CSS come hai fatto è sicuramente una pratica migliore. In quanto tale, voterò la tua risposta come quella corretta (perché il titolo della domanda non fa riferimento al tweaking di basso livello di ui.placeholder). –

2

Ho ricevuto aiuto da un amico su irc.freenode che ha suggerito la seguente soluzione che fa il trucco.

ui.placeholder.css("visibility", "visible"); 
ui.placeholder.css("background-color", "red"); 

Il colore del segnaposto di sfondo non stava mostrando su perché l'elemento effettivo non era visibile (suppongo che sia impostato su nascosta per impostazione predefinita). Quindi impostandolo su visibile consente di vedere il diverso colore di sfondo.

+0

Dove posizioni questo codice? – Sevenearths

+0

Molto bello. Questo è perfetto. –

+0

Puoi anche accorciarlo facendo ui.placeholder.css ({"visibility": "visible", "background-color": "red"}); –

2

CSS

 
.placeholderBackground{background-color:#FD6FB7;} 

PARAMETRO

 
$('.sortable').sortable({ 
axis: 'y', placeholder: 'placeholderBackground' 
}).disableSelection();