4

Is there a proper non-hacky way to add a placeholder text in an empty sortable? I don't mean the placeholder white-space that gets displayed when you drag an item over the sortabel. I mean a text like "Drop items here." that is only displayed when the list is empty.

I tried to display my own placeholder element, but I fail to properly update it's visibility, because jQuery UI does not send me any over or out events when I drag a connected draggable into the sortable.

Edit: Example code: http://jsfiddle.net/RRnD8/

For some reason in this example code the over event is fired. out is still not. But in the real code I can use change instead of over.

Edit 2: Hmm, the out event is triggered. But it is triggered before the dragged element is removed from the sortable. I fixed this via:

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

Is there a cleaner way to do this?

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 に答える