Home/ Questions/Q 8532837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T09:48:30+00:00

I am trying to use the droppable plugin for my site. I have a

  • 0

I am trying to use the droppable plugin for my site. I have a footer dock that have items in a ul list and I am trying to be able to drag items out of the footer dock into any where BUT the dock to remove the item. However no matter what I’ve tried, it doesn’t work as expected. It will allow me to drop it anywhere and it will be removed.

here is my sample code:

HTML

<html>
<body>
...
<div id="page">
...
<div id="dock">
     <ul>
          <li class="item">item 1</li>
          <li class="item">item 2</li>
     </ul>
</div>
...
</div>
...
</body>
</html>

JS

$("body").droppable({
     accept: ".item",
     drop: function(event, ui) {
          removeItem();
     }
});

$(".item").draggable({
     helper: "clone"
});

So the above code doesn’t do what I was expecting. I am able to remove the items even when I am still in the dock. So I can drag the item for like a couple pixels and let go and it would remove the item. What I want is have it able to drop anywhere BUT the dock area to remove.

Any help appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try making your dock draggable with option greedy: true and reverting the item when dropped upon: http://jsfiddle.net/SKDDZ/

    • 0