Respuesta

8

De acuerdo con la jQuery UI Sortable Documentation puede proporcionar una clase css para el marcador de posición. Debería poder especificar el fondo en esta clase.

Usando el marcador de posición y la propiedad forcePlaceholderSize, funciona como un amuleto. He actualizado el jsfiddle link

Espero que ayude.

+1

Gracias por tomarse el tiempo para ayudar a p0wl. Esta solución realmente funciona. Sin embargo, utiliza un diseño/estructura de código diferente al que yo buscaba, es decir: requiere separar el estilo en una clase CSS y heredar el parámetro ancho con foreplaceholderSize establecido en verdadero. Claro, funciona, pero la solución descrita en mi otra respuesta (cortesía de alguien más en IRC) solo requiere una línea adicional de código jQuery para agregar al código en la pregunta original. Es bastante elegante. Tal vez lo encontraste útil también? Gracias de todos modos :) –

+0

Tiene toda la razón, pero depende del punto de vista. Me gusta separar entre javascript y css. Aunque el uso de un parámetro estándar de jquery-ui puede tener ventajas (léalo usando un método get, por ejemplo). – p0wl

+0

Sí, separar Javascript y CSS de la forma en que lo has hecho es ciertamente una mejor práctica. Como tal, voy a votar su respuesta como la correcta (porque el título de la pregunta no hace referencia al ajuste de bajo nivel de ui.placeholder). –

2

Recibí un poco de ayuda de un amigo en irc.freenode que sugirió la siguiente solución que hace el truco.

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

El color de fondo del marcador de posición no mostraba porque el elemento real no era visible (supongo que está configurado como oculto por defecto). Por lo tanto, establecerlo en visible le permite a uno ver el color de fondo diferente.

+0

¿Dónde colocas este código? – Sevenearths

+0

Muy agradable. Esto es perfecto. –

+0

También puede acortar esto haciendo ui.placeholder.css ({"visibility": "visible", "background-color": "red"}); –

2

CSS

 
.placeholderBackground{background-color:#FD6FB7;} 

PARÁMETROS

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

Cuestiones relacionadas