如何检查可拖动元素是否到达可放置区域？

Question

当我拖动可拖动元素并将其置于可放置区域上方时，我想向可拖动元素添加一个新的 class，以便我可以使用 CSS 更改其样式。这是我到目前为止得到的：

<aside>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</aside>
<section></section>

$(document).ready(function(){
 
 //Test 
    $("aside div").draggable({
  revert: "invalid",
  containment: "document",
  helper: "clone",
  cursor: "move"
 });
 
    $('section').droppable({
  accept: "aside div",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
   //valami
   alert('lol');
  }
    });
 
});

aside {
    float:left;
    width:200px;
}

aside div {
    width:200px;
    height:100px;
    background:red;
    margin:0 0 10px 0;
}

section {
    float:right;
    width:400px;
    height:320px;
    background:green;
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<aside>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</aside>
<section></section>

Answer 1

来自 jQueryUi 文档 http://api.jqueryui.com/droppable/#event-over

over( event, ui )Type: dropover

Triggered when an accepted draggable is dragged over the droppable (based on thetolerance option).

你可能也对它的双重感兴趣

out( event, ui )Type: dropout

Triggered when an accepted draggable is dragged out of the droppable (based on thetolerance option).

如何检查可拖动元素是否到达可放置区域？

How to check if droppable area is reached with the draggable element?

html

css

jquery

jquery-ui