function isDraggableHelperInsideDroppableContainer(event, $droppableContainer) { var cTop = $droppableContainer.offset().top; var cLeft = $droppableContainer.offset().left; var cBottom = cTop + $droppableContainer.height(); var cRight = cLeft + $droppableContainer.width(); if (event.pageY >= cTop && event.pageY <= cBottom && event.pageX >= cLeft && event.pageX <= cRight) { return true; } else { return false; } } $('.item').droppable({ tolerance: "intersect", activeClass: "ui-state-hover", accept: "#draggable", drop: function (event, ui) { var dropItem = $(this); if( ! isDraggableHelperInsideDroppableContainer(event, dropItem.closest(".container")) ) { console.log("Drop event returning false to cancel drop because it occurred outside the droppable container!"); return false; } alert("Successfully dropped draggable onto element " + dropItem.text() ); }, over: function (event, ui) { var dropItem = $(this); if (isDraggableHelperInsideDroppableContainer(event, dropItem.closest(".container"))) { dropItem.addClass("dropTargetValid"); } }, out: function (event, ui) { var dropItem = $(this); dropItem.removeClass("dropTargetValid"); }, deactivate: function (event, ui) { var dropItem = $(this); dropItem.removeClass("dropTargetValid"); } }); $('#draggable').draggable();
<div class="container"> <div class="item">Test1</div> <div class="item">Test2</div> <div class="item">Test3</div> <div class="item">Test4</div> <div class="item">Test5</div> <div class="item">Test6</div> <div class="item">Test7</div> <div class="item">Test8</div> <div class="item">Test9</div> <div class="item">Test10</div> <div class="item">Test11</div> <div class="item">Test12</div> <div class="item">Test13</div> <div class="item">Test14</div> <div class="item">Test15</div> <div class="item">Test16</div> <div class="item">Test17</div> <div class="item">Test18</div> <div class="item">Test19</div> <div class="item">Test20</div> <div class="item">Test21</div> <div class="item">Test22</div> <div class="item">Test23</div> <div class="item">Test24</div> <div class="item">Test25</div> <div class="item">Test26</div> <div class="item">Test27</div> <div class="item">Test28</div> </div> <div id="draggable">Drag Me!</div>
.container { position: absolute; top: 50px; left: 50px; height:100px; width:200px; overflow-x:hidden; overflow-y:auto; border:1px solid #000000; } .item { border:1px solid #ff0000; height:30px; width: 500px; } #draggable { border:2px solid #00ff00; height:20px; width:100px; } .ui-state-hover { background-color:#eeeeee; } .dropTargetValid { background-color: green !important; }