php - 添加内容时从空 div 中删除背景

Question

我有一个开始为空的 div，但通过 jQuery Sortable 将项目添加到其中。我希望做的是首先显示带有边框和背景图像的空 div，图像会说“将项目拖到这里”。但是一旦第一个项目被移动到空的 div 中，背景就会变成空白。

我希望这样做，因为新 div 中的项目被重新排序，并且我不希望在用户移动项目时背景可见。

Answer 1

不需要 jQuery，使用纯 css ：

.yourDiv:empty{
    background-image : url(...);
    //set your width / height if it isnt set in an other rule.
}

Answer 2

$(document).ready(function() {
    var divChange = setInterval(function() {
        if ($('div').html().length) {
            contChanged($(this));
        }
    },100);
    function contChanged(elem) {
        $('div').css('background', '#ccc');
        clearInterval(divChange);
    }

    $('button').click(function(){
        $('div').html('Content added!');
    });
});

工作演示在这里！

Answer 3

CSS3 :psuedo 类 :empty 几乎适用于所有浏览器。如果您希望支持旧版本的 IE（IE8 及以下），我建议使用 Sortable 小部件的接收功能：http: //api.jqueryui.com/1.9/sortable/#event-receive