使用JavaScript模拟在SortableJS可排序列表上进行拖放操作

Question

我想模拟使用Sortable库创建的可排序HTML列表上的拖放操作。它使用本地HTML5 API在列表内实现可拖动元素和排序。

为了模拟这些拖放事件，我找到并修改了以下JavaScript代码：

var triggerSortableDragAndDrop = function (selectorDrag, selectorDrop, callback) {
  var DELAY_INTERVAL_MS = 10;
  var MAX_TRIES = 2;

  // fetch target elements
  var elemDrag = document.querySelector(selectorDrag);
  var elemDrop = document.querySelector(selectorDrop);
  elemDrag.setAttribute('draggable',"true");
  elemDrop.setAttribute('draggable',"true");
  elemDrag.href="#";
  
  var dragItems = document.querySelectorAll('[draggable=true]');


  if (!elemDrag || !elemDrop) {
    console.log("can't get elements");
    return false;
  }

  var startingDropRect = elemDrop.getBoundingClientRect();

  function rectsEqual(r1, r2) {
    return r1.top === r2.top && r1.right === r2.right && r1.bottom === r2.bottom && r1.left === r2.left;
  }

  // function for triggering mouse events
  function fireMouseEvent(type, elem) {
    var evt = document.createEvent('MouseEvent');
    evt.initMouseEvent(type, true, true, window, 1, 1, 1, 0, 0, false, false, false, false, 0, elem);
    elem.dispatchEvent(evt);
  };

  // trigger dragging process on top of drop target
  // We sometimes need to do this multiple times due to the vagaries of
  // how Sortable manages the list re-arrangement
  var counter = 0;
  function dragover() {
    counter++;
    console.log('DRAGOVER #' + counter);

    var currentDropRect = elemDrop.getBoundingClientRect();
    if (rectsEqual(startingDropRect, currentDropRect) && counter < MAX_TRIES) {
      if (counter != 1) console.log("drop target rect hasn't changed, trying again");

      // mouseover / mouseout etc events not necessary
      // dragenter / dragleave events not necessary either
      fireMouseEvent('dragover', elemDrop);

      setTimeout(dragover, DELAY_INTERVAL_MS);
    } else {
      if (rectsEqual(startingDropRect, currentDropRect)) {
        console.log("wasn't able to budge drop target after " + MAX_TRIES + " tries, aborting");
        fireMouseEvent('drop', elemDrop);
        if (callback) callback(false);
      } else {
        setTimeout(drop, DELAY_INTERVAL_MS);
      }
    }
  }

  function drop() {
    console.log('DROP');
    // release dragged element on top of drop target
    fireMouseEvent('drop', elemDrop);
    fireMouseEvent('mouseup', elemDrop);    // not strictly necessary but I like the symmetry
    if (callback) callback(true);
  }

  // start dragging process
  console.log('DRAGSTART');
  fireMouseEvent('mousedown', elemDrag);
  console.log('mousedown triggered');
  fireMouseEvent('dragstart', elemDrag);
  console.log('dragstart triggered');

  // after a delay, do the first dragover; this will run up to MAX_TRIES times
  // (with a delay between each run) and finally run drop() with a delay:
  setTimeout(dragover, DELAY_INTERVAL_MS);
  return true;
};

我正在尝试拖放的部分的标记如下：

当我尝试在浏览器的拖动事件侦听器上设置断点，并使用以下方式在浏览器控制台中执行帮助函数：

triggerSortableDragAndDrop('#bookmarkItems > li:nth-child(2)', '#bookmarkItems > li:nth-child(2)');

我注意到dragstart事件从未被捕获，但mousedown和dragover事件被捕获了。

如何使dragstart事件触发其监听器？因为我认为这是导致拖放模拟失败的原因。

- AuthenticReplica

---

我遇到了类似的问题，你最终解决了吗？ - methuselah

@methuselah 不好意思，我已经放弃了 :P 如果你找到了一个可行的解决方案，请告诉我。 - AuthenticReplica

我最终使用CypressJS处理拖放事件。它可以与https://www.npmjs.com/package/@4tw/cypress-drag-drop一起使用。 - methuselah

@methuselah 希望我也有那个选项 :/ 不过我只能使用C#/Specflow和IE - 谢谢 - AuthenticReplica

@AuthenticReplica 这个URL是公开的吗？您是否考虑使用Selenium-Python或Selenium_Java来解决问题？ - undetected Selenium

嗨@AuthenticReplica，你能给我一些关于我的回答的反馈吗？ - Daniele Ricci

Answer 1

我能看到你的代码中创建了一个类型为MouseEvent的dragstart事件，而它应该是DragEvent类型的。

var elem = document.getElementById("one");
var mousedown = document.createEvent('MouseEvent');
mousedown.initMouseEvent("mousedown", true, true, window, 1, 1, 1, 0, 0, false, false, false, false, 0, elem);
elem.dispatchEvent(mousedown);
var dragstart = document.createEvent('DragEvent');
dragstart.initMouseEvent("dragstart", true, true, window, 1, 1, 1, 0, 0, false, false, false, false, 0, elem);
elem.dispatchEvent(dragstart);

<div id="one" draggable="true" onmousedown="console.log('mousedown')" ondragstart="console.log('dragstart')">drag me</div>

在Chrome和Edge上将dragstart事件正确创建为事件类型，它就能工作。

希望这有所帮助。

- Daniele Ricci

Answer 2

我使用了一种更现代的方法来触发dragstart和mousedown事件（请注意，使用事件构造器优于document.createEvent()）。这两个事件都按预期工作。以下是一些代码以说明:

let text = document.getElementById('image');
text.addEventListener('dragstart', () => {
  console.log('dragstart triggered')
});
text.addEventListener('mousedown', () => {
  console.log('mousedown triggered')
});

function btn_click() {
  const evt_1 = new MouseEvent('mousedown');
 text.dispatchEvent(evt_1);
  
  const evt_2 = new DragEvent('dragstart');
 text.dispatchEvent(evt_2);
}

<p>Drag around the image to trigger the ondragstart and mousedown event.</p>
<button onclick='btn_click()'>Programatically trigger the ondragstart and onmousedown events.</button>
<br>
<br>
<img id='image' src='https://via.placeholder.com/150'>

然而，在您的代码中存在一个很大的未知数；您使用的库如何处理这些事件？它是否甚至处理ondragstart事件？它很可能仅使用其他事件，因此您不能假设这些事件在您的JS代码中。主要问题是JS与库之间的耦合。

因此，有两种方法可以解决这个问题：

1. 确保您的代码使用库响应的事件（请记住，库中的代码和可用事件可能随时间而改变）
2. 实现自己的拖放行为

PS：如果您正在编写测试，则可以决定不测试库并相信它会按预期运行。也许您可以验证您对库的实现是否正确。

- Rob Monhemius