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

Posted 2023-05-08

【中文标题】拖动元素jquery ui时连续触发鼠标悬停事件？

【英文标题】：Continually fire mouseover event while dragging over an element jquery ui?

【发布时间】：2016-04-27 02:03:10

【问题描述】：

希望这是有道理的。我正在使用 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 循环来实现，但我一直无法找出不会使页面崩溃的解决方案。

【问题讨论】：

看看这个：***.com/a/8615260/789377

@Maxali 谢谢，我不确定这是否能回答我的问题。 Jquery UI 有一个内置选项可以在 mouseEnter 上触发函数，但它只触发一次。但也许我错过了你试图指出的内容。

为什么不能正常使用mousemove事件？

@TJ 我试图以某种方式将可放置的“over”选项与“mousemove”结合起来，但没有成功。如果可能的话，我不确定如何。你对这个方向有什么建议吗？谢谢。

@ChrisPatty 为什么需要将它们结合起来..？只为所有 droppables 设置一个 mousemove 监听器..？

【参考方案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)"  >

CSS

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

【讨论】：

啊！这看起来很有希望。我以前从未使用过这个属性，它来自 HTML5 吗？它似乎在做我想做的事，明天我会检查它是否能很好地与我现有的 javascript 配合使用。谢谢！

运气好@ChrisPatty？