可排序的jQuery UI如何将自定义占位符添加到空列表

Question

我正在尝试使用可排序插件制作仪表板。我已将两个不同的列设置为可排序列表。我想要做的是：如果sortable-list为空，如果其中没有小部件，我想在这里添加一个自定义描述字段。使用jQuery，我可以为空div添加描述，但该描述是永久性的。我希望代码能够连续运行。

<div id="draggable-area" class="row">
  <div class="col-md-8 col-xl-8 col-xs-8">
    <div class="sortable-list">
      <div class="sortable-item">
        <div class="main-title">
          <span class="pull-left">
            <span class="trade-icon"></span>
            <h1>Trades</h1>
          </span>
          <i class="fa fa-arrows drag" aria-hidden="true"></i>
          <span class="pull-right">
            <a href="#"><strong>All new trades</strong></a>
          </span>
        </div>

        <div class="trade-posts">
          <ul>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-xl-4 col-xs-4">
    <div class="sortable-list">

    </div>
  </div>
</div>

此代码检查空div。

$(".sortable-list").each(function(){
function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($(this))) {
    $("<div class='empty'><span>You can drop here.</span></div>").appendTo(this);
  }
});

Answer 1

根据我的理解，我试图做出改变。 我改变了你使用每个功能的方式。

请检查这个小提琴：

http://jsfiddle.net/rmSgx/386/

代码：

function insertContent(){
  var $list = $(".sortable-list");
  $list.each(function(index,li){
    if($(li).text().trim().length === 0){
     $(li).text("Please insert here...");
    }
  })
}

如果您还有其他想要的东西，请详细说明。我会做必要的修改。