拖动元素jquery ui时连续触发鼠标悬停事件？

Question

希望这是有道理的。我正在使用 jquery UI 创建一个拖放模式。我将我的代码设置为触发一个使用“over”选项调整某些样式的函数。这是我的代码。

    function makeDraggable(){
    $(function(){
        $( "tr[role='row']" ).draggable({
          cursor: "none",
          cursorAt: { top: 50, left: 50 },
          containment: "body",
          scroll: false,
          delay: 200,
          start: function() {
            openModal();
          },
          stop: function() {
            closeModal();
          },
          helper: function( event ) {
          return $( "<div class='drag-folder'><img src=<?php echo site_url("imgs/processIcons/file_icon.svg");?>></div>" );
            }
        })
    });
    makeDroppable();
}

function makeDroppable(){
    $(function(){
        $( ".flex-item" ).droppable({
              tolerance: 'pointer',
            over: function(event, ui) {
                $(this).find('.drag-container').css('height', (180 + (event.pageY / 5 )));
            },
            out: function(event, ui) {
                $(this).find('.drag-container').css('height', '');
            },
            drop: function(event, ui) {
                $('.drag-container').css('height', '');
            }
        })
    });
}

function openModal(){
    var modal = $('.drag-modal');
    modal.fadeIn();
}

function closeModal(){
    var modal = $('.drag-modal');
    modal.fadeOut();
}

我想要达到的效果是这样的：用户开始拖动一个元素，一个模态框弹出几个不同的放置区域。出于美学目的，每个放置区域的高度都垂直地向鼠标延伸。问题是使用“over”选项调整高度，但它只触发一次（当鼠标进入元素时）。有什么方法可以运行我的代码，每次鼠标移动时都会改变高度，但只在元素上方时？

--编辑--

我突然想到，也许这可以使用某种 while 循环来实现，但我一直无法找出不会使页面崩溃的解决方案。

Answer 1

您可以使用ondragover 事件吗？

DEMO

JS

function allowDrop(ev) {
  document.getElementById("div1").textContent += " dragging! \n";
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<img id="drag1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=336&h=69" draggable="true" ondragstart="drag(event)" width="336" height="69">

CSS

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  font-size: 5px;
}