javascript - HTML5 拖放。检测元素被抓取的位置

Question

我正在使用 HTML 5 拖放 API，并实现可排序列表和自动滚动。对于某些功能，我希望能够检测到元素的哪一部分被抓取

这是插图

如有任何帮助，我们将不胜感激，谢谢

Answer 1

您可以使用计算出的元素的 padding+width 和 MouseEvent 的 offsetX 属性。计算所选区域。

yourElement.addEventListener('mousedown', function onDragStart(event){
  let width = parseInt(window.getComputedStyle(yourElement).getPropertyValue('width'));
  let padding = parseInt(window.getComputedStyle(yourElement).getPropertyValue('padding-left'));
  let position = event.offsetX;
  let middle = (width / 2) + padding;

  if (position <= middle) {
    console.log('left');
  } else {
    console.log('right');
  }
});

请参阅此 jsfiddle 示例:https://jsfiddle.net/c23Lu6gy/28/