javascript - jQuery UI Drop 具有背景颜色的占位符

Question

我有几列是 <ul>标签，每一列都有自己的背景颜色，每一列都可以通过 jQuery UI 进行排序。我的问题是，我想制作带有背景颜色、自定义边框尺寸等的放置占位符。但是无论我设置哪种颜色，占位符的背景颜色都将与我要放置它的列的背景颜色相同。这是我所做的简单示例:

<div class="wrap">
            <ul class="prvi">
                <li class="naslov">Naslov1</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
            <ul class="drugi">
                <li class="naslov">Naslov2</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
            <ul class="treci">
                <li class="naslov">Naslov3</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
            <ul class="cetvrti">
                <li class="naslov">Naslov4</li>
                <li>Neki predmet</li>
                <li>Neki predmet</li>
            </ul>
    </div>

jquery文件

$(document).ready(function(){
    $("ul").sortable({containment : 'document', tolerance: 'pointer', cursor: 'pointer', 
    revert: 'true', opacity : 0.6, connectWith : "ul", placeholder: 'border', 
    items : 'li:not(.naslov)'}).disableSelection();
});

和CSS

...
.border{
    border: 2px solid black;
    background-color: lightgray;
    box-shadow: 0 0 5px black;
    color: white;
}

.prvi li{
    background-color: gray;
}

.drugi li{
    background-color: red;
}

.treci li{
    background-color: yellow; 
}

.cetvrti li{
    background-color: green;
}

Answer 1

好的，我解决了你的问题。您应该使用 !important in background-color 作为占位符。这是你的 jsfiddle:http://jsfiddle.net/XwBXX/

在你的 CSS 中做这个:

.border{
border: 2px solid black;
background-color: lightgray !important /* when you add this problem solved */;
box-shadow: 0 0 5px black;
color: white;

现在您可以设置任何您想要的背景颜色，它会应用它。