Only drop to element that is seen

Question

I have the following: I am trying to set it up so that when you drag the item, it only gets dropped to the div element which you can see, and is not covered up. So I used this js: ``` $(".draggable").draggable({ helper: "clone" }) $("#bottom, .draggable").droppable({ drop: function(event, ui) { var $this = $(this), $dragged = $(ui.draggable); $this.append($dragged.clone()); }, hoverClass: "dragHover" }) ``` But it drops the element in both places even though only one of the drop zones is not visible! How do I fix it so that this does not happen? Fiddle: http://jsfiddle.net/maniator/Wp4LU/ Extra Info to recreate the page without the fiddle: HTML: ```

Lorem ipsum dolor sit amet

Lorem ipsum…

Accepted Answer

Try setting with `accept` function. The working demo.

```
$("#bottom, .draggable").droppable({
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },
    accept: function () {
        var $this = $(this), divTop= $("#top");
        if ($this.is(".draggable")) {
          return $this.offset().top < divTop.offset().top + divTop.height() ;
        }
        return true;
    },
    hoverClass: "dragHover"
})​;​
```

Only drop to element that is seen

Solution

Problem

Related problems