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

标签 javascript jquery html css jquery-ui

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

最佳答案

好的,我解决了你的问题。您应该使用 !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;

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

关于javascript - jQuery UI Drop 具有背景颜色的占位符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19081278/

相关文章:

javascript - 在站点导航时保持 WebRTC 视频流处于事件状态

javascript - 如何解决 Parceljs 中的别名?

javascript - 如何改变滚动条的颜色?

html - 文本背景颜色溢出

javascript - jQuery UI Accordion 不稳定

javascript - 如何检测图像加载失败的原因?

javascript - 如何将不同大小的圆圈对齐到中间?

javascript - 如何使用成功和失败处理程序的引用重试 Ajax 调用

jquery - 使用 CSS/jQuery 平衡 HTML 中的标题

javascript - 如何将行号添加到动态添加到 html 表的行