Working demo here!

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!');
    });
});

Working demo here!

Answer 3

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

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

3 个答案:

Working demo here!