$('.item').droppable({ tolerance: "intersect", activeClass: "ui-state-hover", hoverClass: "dropTargetValid", accept: "#draggable", drop: function (event, ui) { var dropItem = $(this); alert("Successfully dropped draggable onto element " + dropItem.text() ); } }); $('#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; }