Preview draggable element in droppable area before element is dropped

Question

I am trying to implement dragging and dropping. Everything works as expected however, when the user is dragging a div containing text to a droppable div containing text I would like the user to be able to see what it would look like when they have dragged over the droppable area before they release the mouse and drop it.

In essence I want they to be able to preview what the text would look like in the new locations before it's dropped and committed to the DB via AJAX.

The actual drag and drop works as expected but I have been unable to figure out how to swap the two elements once the user drags the element into a droppable area.

I have tried to swap them out on the over event and then revert back on the out event. But once I set the value of the dragged div to the potential dropped location i have no way to get it back.

I tried storing the dragged text in a variable within Over: however, it loses scope when I try to set it back in the Out: event.

The desired effect would be:

User drags element over a droppable area. The text inside of the droppable is swapped with what was dragged. If the user likes the change, then just commit the change on drop. If not revert it all back to what it was.

Below is a small snippet of code that I was trying to use to get it to work which obviously failed.

tolerance: "pointer",
helper: "clone",
hoverClass: "dragndrophover",
over: function(event, ui) {
   if( $(this).hasClass('xlt_text') ){
        //ui.draggable.html($(this).html());
    }
},
out: function(event, ui) {

    if( $(this).hasClass('xlt_text') ){
        //$(this).html(ui.draggable.html());

    }
},

Any help would be appreciated.

Please post a jsfiddle or some example so we can help you better.. (not server-side needed, of course) — Joaquín O, Dec 11 '14 at 23:25

score 0 · Answer 1 · answered Dec 12 '14 at 17:14

You can just clear the text on out event:

tolerance: "pointer",
helper: "clone",
hoverClass: "dragndrophover",
over: function(event, ui) {
  if( $(this).hasClass('xlt_text') ){
    $(this).text(ui.draggable.text());
  }
},
out: function(event, ui) {
   $(this).text(""); // clear the added text
},

Preview draggable element in droppable area before element is dropped

1 Answers1