cevap

8

jQuery UI Sortable Documentation Eğer tutucu için bir css sınıfı sağlayabilir:

Bu jsfiddle kod onu en iyi açıklıyor. Bu sınıftaki arka planı belirtmeniz gerekir.

Yer tutucuyu ve forcePlaceholderSize özelliğini kullanarak, bir çekicilik gibi çalışır. jsfiddle'ı güncelledim link

Yardım budur.

+1

teşekkürler. Bu çözüm gerçekten işe yarıyor. Bununla birlikte, daha sonra kullandığım çizgiye farklı bir kod düzeni/yapı kullanır, yani: stilin bir CSS sınıfına ayrılmasını ve width parametresinin foreplaceholderSize öğesinin true olarak ayarlanmasını gerektirir. Tabii ki, hile yapar, ama diğer cevabımda özetlenen çözüm (IRC üzerinde başka birinin nezaketinde) sadece orijinal sorudaki koda ek olarak bir jQuery kodu eklenmesini gerektirir. Oldukça zarif. Belki de yararlı buldunuz? Neyse teşekkürler :) –

+0

Oldukça doğru, ama bakış açısına bağlı. Javascript ve css arasında ayrılmak istiyorum. Standart bir jquery-ui parametresinin kullanılması avantajlı olsa da (örneğin get metodunu kullanarak okuyun). – p0wl

+0

Evet, Javascript ve CSS'yi yaptığınız şekilde ayırmak kesinlikle daha iyi bir uygulamadır. Bu nedenle, cevabınızı doğru olanı olarak seçeceğim (çünkü sorunun başlığı, ui.placeholder'ın düşük düzeyli ayarlarına referansta bulunmadığı için). –

2

Irc.freenode'deki bir arkadaşımdan yardım aldığım aşağıdaki çözümü öneren bir arkadaşım var. Gerçek eleman görünür olmadığı için

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

yer tutucu arka plan rengi (ı varsayılan olarak gizli için ayarlandıktan varsayalım) gösterilmesini değildi. Bu yüzden görünür hale getirmek, farklı arka plan rengini görmenizi sağlar.

+0

Bu kodu nereye yerleştiriyorsunuz? – Sevenearths

+0

Çok hoş. Bu harika. –

+0

Ayrıca bunu ui.placeholder.css ({"görünürlük": "görünür", "arka plan rengi": "kırmızı"}) yaparak da kısaltabilirsiniz; –

2

CSS

 
.placeholderBackground{background-color:#FD6FB7;} 

PARAMETRE p0wl amacıyla zaman ayırdığınız için

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

İlgili konular