Geek Answers Handbook

Display placeholder text in blank order using jQuery UI

Is there any suitable non-hacker way to add placeholder text in an empty sort? I do not mean the white space that appears when you drag an item over the sort. I mean text, for example, "Drop items here". which is displayed only when the list is empty.

I tried displaying my own placeholder, but I was not able to correctly update its visibility because the jQuery user interface does not send me any transitions or events when I drag the related drag and drop into the sortable one.

Edit: Code example: http://jsfiddle.net/RRnD8/

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

Edit 2: Hmm, the out event fires. But it starts before the drag item is removed from the sortable one. I fixed this with:

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

Is there a cleaner way to do this?

+4
source share
2 answers

Use the over event to hide the placeholder text, the out event to show it, and the stop method to remove it.

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

Live example - http://jsfiddle.net/JfGxy/2/

+9
source

SASS Method:

 #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; } }
0
source

More articles:


All Articles