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;
}

拖动元素jquery ui时不断触发mouseover事件？

的 - 编辑 -

1 个答案: