Question

Is there any way to have a jQuery sortable list show a placeholder for where the initial item was when you drag one out to sort?

i.e. when a user goes to move one of the LIs in my list, I want a rectangle outline to show where the one they’re dragging came from.

Answer 1

Short version: you can use sortable’s start event handler to reveal the original item, and modify its appearance however you like. E.g.:

$(listOfStuff).sortable({
  start: function (e, ui) { 
    ui.item.show().addClass('original-placeholder');
  });

With the above, rather than your original item dissappearing when the user begins to drag, it will maintain its original position, and it will gain the ‘original-placeholder’.

What’s going on (as far as I can tell):

• The start function is run when the user begins to drag.
• When the user begins to drag, the original item isn’t actually moved, it’s just hidden. (ui.helper is a separate object that the user drags around). By calling ui.item.show(), you keep it revealed. (Well, technically it gets hidden and then immediately un-hidden, but I can’t see any flicker.)
• And then you can modify ui.item to your heart’s content. In the above example I just added a class, but you could instead replace its internal HTML, etc.

I’m not particularly familiar with the internals, but I’d imagine others may be able to say more about how far one can push this technique.