jquery 拖放,mouseenter在不同元素上触发

1yjd4xko  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(100)

基于我发现的一些小提琴(不记得是哪一个了,对不起),我创建了一个“看板板”,在那里我可以将人拖放到不同的块中。它是一个在person div上的mouseenter上触发的带有tooltip/popups的板。在完成它并开始测试后,我注意到有时在删除一个人后,我会得到一个新的弹出窗口,为一个不同的人。我不明白为什么,如何以及何时。所以我试着把我的项目剥离到下面的小提琴上,看看我是否能弄清楚为什么。fiddle和我的项目一样行为不端,只是这里我只记录mouseenter事件。
有时,当我把“人A”拖到“块B”并放下它时,小提琴会在“人B”上悬停。然而,这种情况并不总是发生。
在我看来,如果将人A拖到人B上,它将在人A被放下后触发人B上的鼠标输入。但并不总是如此。也许降落点很重要。我只是不知道它是什么时候发生的,但它经常发生。
编辑:对我来说,似乎鼠标的位置保持在拖动开始的点上。如果我在拖放后立即将鼠标移出我正在拖动的div“真实的quick”,则在前一点上发生了一个鼠标输入(现在是一个不同的div)。
当然,我只是想在拖放时删除所有mouseenter事件。
超文本标记语言:

<div class="container">
  <div class="board" id="board">

    <div class="block" id="aaa" ondrop="drop(event)" ondragover="allowDrop(event)">
      <strong>Block A</strong>
      <div class="person" id="pa" draggable="true" ondragstart="drag(event)"><span>Person A</span></div>
      <div class="person" id="pb" draggable="true" ondragstart="drag(event)"><span>Person B</span></div>
      <div class="person" id="pc" draggable="true" ondragstart="drag(event)"><span>Person C</span></div>
    </div>

    <div class="block" id="bbb" ondrop="drop(event)" ondragover="allowDrop(event)">
      <strong>Block B</strong>
    </div>

  </div>
  <textarea id="log" rows="8"></textarea>
</div>

字符串
JavaScript:

function drag(ev) {
  $("#log").val(""); //reset log on drag
  ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

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

$(document).ready(function() {
  $(document).on("mouseenter", ".person", function() {
    $("#log").val($("#log").val() + "\nHover on " + $(this).text());
  });
});


小提琴:https://jsfiddle.net/60jc17hm/
我只是试图创建一个测试小提琴,我可以用它来确定何时发生这种情况。

hgncfbus

hgncfbus1#

我想我想办法解决了一些问题。

function displayHover(event){
    $("#log").val($("#log").val() + "\nHover on " + event.target.innerText);
}

$(document).ready(function() {
    $(document).on("mouseenter", ".person", displayHover)
  var was_dragged = false;
  $(document).on("dragend", function(){
    $(document).off("mouseenter", ".person", displayHover)
    $(document).one("mousemove", function(){
        $(document).on("mouseenter", ".person", displayHover);
    })
  });
});

字符串
至少对我有用。。
我会尝试解释,但我是一种新的,所以它可能会很可怕:
我认为事情是这样的,当你拖动一个对象时,你就像一个“新鼠标”,可以在对象上拖动,但不能悬停它们...(我想在现实中它更技术化,但这是我作为新手的看法)
所以当拖动停止时(Jquery dragend事件),鼠标的“旧”示例(抱歉这样粗俗化)在旧的地方(dragstart),悬停在你刚刚移动的元素下面的可拖动元素上(在人A下面是人B,在开始),然后转到放置位置并悬停被放置的元素。所以你在移动人A块之后悬停人B,然后是人A
所以我建议在你停止拖动动作的时候禁用mouseenter事件,并在鼠标移动的时候重新激活它。

6qqygrtg

6qqygrtg2#

根据@Hordrist的回答,我最终得到了下面的答案。在拖动开始时禁用mouseenter触发器,然后在拖动结束后鼠标移动时重新初始化它。

function displayHover(event){
  $("#log").val($("#log").val() + "\nHover on " + event.target.innerText);
}

function drag(ev) {
  $("#log").val(""); //reset log on drag
  ev.dataTransfer.setData("text", ev.target.id);
  $(document).off("mouseenter", ".person");
}

function allowDrop(ev) {
  ev.preventDefault();
}

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

$(document).ready(function() {
  $(document).on("mouseenter", ".person", displayHover);
  $(document).on("dragend", function(){
    $(document).one("mousemove", function(){
      $(document).on("mouseenter", ".person", displayHover);
    });
  });
});

字符串

相关问题