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

Continually fire mouseover event while dragging over an element jquery ui?

本文关键字：鼠标 悬停 事件 元素 拖动 jquery ui      更新时间：2023-09-26

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

你能使用 ondragover 事件吗？

演示

.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;
}
相关文章：