javascript - jQuery:获取 HTML 5 放置的位置

Question

我正在制作一个带有标签 Pane 的网络应用程序。要在选项卡 Pane 周围移动选项卡并移动到其他窗口，我使用 native HTML 拖放。

要在选项卡 Pane 周围移动选项卡，用户可以将一个选项卡拖到另一个选项卡上，然后根据选项卡在选项卡上拖动的位置将其放置在左侧或右侧。我不确定如何找到选项卡在另一个选项卡上的放置位置。

$(document).on('dragstart', '.tabpane li', function(e) {
  ...
});

$(document).on('dragover', '.tabpane li', function(e) {
  e.preventDefault();
});

$(document).on('drop', '.tabpane li', function(e) {
  var droppedOnTabAt = ? ? ? ; // How do I find this?

  if (droppedOnTabAt.x > $(this).width() / 2) {
    // move tab to the right of the dropped onto tab
  } else {
    // move tab to the left of the dropped onto tab
  }
});

Answer 1

能够通过阅读更多内容来解决我的问题 documentation .

$(document).on('drop', '.tabpane li', function(e) {
  var droppedOnTabAt = e.originalEvent.clientX; // Gets the x position of the drop relative to the window
  var tabMiddlePos = $(this).offset().left + $(this).width() / 2; // Gets the center of width of the tab dropped on relative to the window

  if (droppedOnTabAt > tabMiddlePos ) {
    // move tab to the right of the dropped onto tab
  } else {
    // move tab to the left of the dropped onto tab
  }
});