0

我有几列是<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;
}
4

1 回答 1

2

好的，我解决了你的问题。您应该在背景颜色中使用 !important 作为占位符。这是你的 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;

}

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

于 2013-09-29T20:25:30.107 回答