0

I have a 2 boxes where user can drop items. You can test it here. That is how my droppable area is look like:

$(".projLeader ol, .projChecker ol").droppable({ 
tolerance: 'pointer', 
hoverClass: 'highlight',
    drop: function(ev, ui)
    {
         var zz = ui.draggable.text()
         var xyz = itm.includes(zz);

          var item = ui.draggable;
          if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
          //this.innerHTML = '';                                                                                // clean the placeholder
          item.addClass('dropClass').appendTo(this); 
          // append item to placeholder   
          //add to array
          itm.push(zz);
          var n = $(this).closest("div.proc").find(".dropClass").length;
          $(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");


    }
});

The problem is when I drag out element and leave it outside droppable area it still there, how can make it disappear or return to the droppable area it was. I mean if user drags it out and leaves it outside droppable area item should back to the droppable area. And I got one more problem when i am dragging item from box1 to box2 it duplicates and not inside box2. How it can be fixed? Thanks for any help

Yevgeniy Bagackiy
  • 974
  • 9
  • 29

1 Answers1

2

if you want to remove element that is dragged out of the droppable area then Try this Code

   $('#someID').droppable({
   out: function(event, ui) {
      $(ui.draggable).remove();
    }
   });

Or Check This Question Remove Item On Drop

Community
  • 1
  • 1
Iññoceñt Ùšmâñ
  • 316
  • 1
  • 6
  • 16
  • it works, but I have problem, item also disappear from accordion if i want for example drop item in box2 i need first cross box1 and then item is disappear from accordion. [You can try it](https://jsfiddle.net/montel388/97u0peju/213/) – Yevgeniy Bagackiy Nov 08 '16 at 06:23