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/