4

是否有适当的非 hacky 方式在空的可排序中添加占位符文本？我不是指当您将项目拖到排序标签上时显示的占位符空白。我的意思是像“将物品放到这里”这样的文字。仅在列表为空时显示。

我试图显示我自己的占位符元素，但我未能正确更新它的可见性，因为当我将连接的可拖动对象拖入可排序对象时，jQuery UI 不会向我发送任何结束或结束事件。

编辑：示例代码：http: //jsfiddle.net/RRnD8/

出于某种原因，在此示例代码中，该over事件被触发。out仍然没有。但在实际代码中，我可以使用change而不是over.

编辑2：嗯，out事件被触发。但它是在拖动元素从可排序元素中移除之前触发的。我通过以下方式解决了这个问题：

e.sortable({out: function () {
    setTimeout(realOutHandler.bind(this), 0);
}});

有没有更清洁的方法来做到这一点？

4

2 回答 2

9

使用over事件隐藏占位符文本，使用out事件显示它，以及stop删除它的方法。

$("#sortable").sortable({
    revert: true,
    over: function() {
        $('.placeholder').hide();
    },
    out: function() {
        $('.placeholder').show();
    },
    stop: function() {
        $('.placeholder').remove();
    }
});
$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});

现场示例- http://jsfiddle.net/JfGxy/2/

于 2012-06-14T16:26:33.803 回答
0

SASS方式：

#sortable
   &:empty {
      padding: 0;
      min-height: 50px;
      z-index: 999;
      margin-bottom: 10px;
      margin-right: 25px;
      border: 4px dashed #CCC;
      background-color: #F5F5F5;

      &:after {
        color: #888;
        content: "Drop items here";
        display: block;
        min-height: inherit;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
   }
}
于 2016-11-24T16:08:11.203 回答