Question

我正在尝试创建一个用于拖放文件的div。我希望将文件拖到div内会增加它的高度，而将文件拖出会减小它的高度。

为此，我使用了一些在ondragover和ondragleave事件发生时调用的函数。使用.css（）函数更改div的高度，一切正常。使用.animate（）函数会发生意外情况：ondragover调用了扩大div的函数，但是如果（不删除文件）将其拖出div，则不会降低其高度。我已经通过控制台验证了这两个事件都发生，并且控制台中没有错误。

尝试以下操作，将文件拖入div或从div拖出而不拖放。

function enter_drop(){
  $("#box").animate({height: "300px"},500);
}

function leave_drop(){
  $("#box").animate({height: "100px"},500);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;float:left" ondragover="enter_drop()" ondragleave="leave_drop()"></div>

<img id="drag1" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" draggable="true" style="float:left">

Answer 1

将元素拖到放置目标上方时，ondragover会不断触发。

jQuery的.animate()队列的每个回调，因此在执行ondragleave时仍在运行动画。

您可以使用.stop(true)清除队列中的动画，随后的所有动画都将立即执行。

function enter_drop(e){
  $("#box").animate({height: "300px"},500);
}

function leave_drop(e){
  $("#box").stop(true).animate({height: "100px"},500);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;" ondragover="enter_drop()" ondragleave="leave_drop()"></div>

<img id="drag1" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="width:50px;height:50px;" draggable="true">

Answer 2

@Cue关于问题原因的答案是正确的。

但是，使用.stop(true)来停止动画队列太长了不是正确的解决方案。更好的方法是只触发一次动画ondragenter：

。

实际上，最好的解决方案是将两者结合起来：

仅enter_drop触发一次ondragenter ...
和 .stop(true).animate(... ondragleave，因此如果离开时打开动画仍在进行中，则该元素不会继续输入动画，但是停在当前的高度位置，并开始朝100的方向动画。

function enter_drop(){
  $("#box").animate({height: 300},350);
}

function leave_drop(){
  $("#box").stop(true).animate({height: 100},350);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;float:left" ondragenter="enter_drop()" ondragleave="leave_drop()"></div>

<img id="drag1" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" draggable="true" style="width: 100px;">

为什么JQuery .animate（）无法按预期工作？

2 个答案: