拖放 API 的问题还是？

Question

我遇到了 HTML5 拖放 API 的问题。

长话短说，除了dragstart、dragover 和drop 之外，还有三个事件对我的目标至关重要。这三个事件是mousedown、mouseup 和mouseleave。

 

鼠标按下

当用户在给定元素上触发mousedown 事件时，以下函数将属性和侦听器应用于自身和目标元素。

function doThis() {
  d.setAttribute('draggable', true)
  d.addEventListener('dragstart', dragStart)
  t.style.background = 'black'
  t.addEventListener('dragover', dragOver)
  t.addEventListener('drop', drop)
}

 

onmouseup 和 mouseleave

当用户触发mouseup 或mouseleave 事件时，这些属性和侦听器将被移除。

function thenThis(){
  d.setAttribute('draggable', false)
  d.removeEventListener('dragstart', dragStart)
  t.style.background = 'none'
  t.removeEventListener('dragover', dragOver)
  t.removeEventListener('drop', drop)
}

我不得不添加mouseleave 监听器，因为mouseup 事件必须发生在它所绑定的元素上才能被触发。在不应用mouseleave 事件的情况下，用户可以通过双击元素并滑动将光标从元素上移开，直到超出元素的边界才松开鼠标按钮。

问题...

如果用户单击的可拖动元素太靠近其边缘，则尽管触发了mousedown 事件，该元素仍将变为不可拖动。

Here is an codepen MVC which can also be viewed below.

为什么会发生这种情况？ mousedown 甚至被触发，但该元素仍然不可拖动...

有人知道我该如何解决这个问题或从一开始就阻止它发生吗？

var d = document.getElementById('draggable')
var t = document.getElementById('target')

d.addEventListener('mousedown', doThis)
d.addEventListener('mouseup', thenThis)
d.addEventListener('mouseleave', thenThis)
d.addEventListener('mouseleave', alertLeave)

function doThis(){
  d.setAttribute('draggable', true)
  d.addEventListener('dragstart', dragStart)
  t.style.background = 'black'
  t.addEventListener('dragover', dragOver)
  t.addEventListener('drop', drop)
}

function thenThis(){
  d.setAttribute('draggable', false)
  d.removeEventListener('dragstart', dragStart)
  t.style.background = 'none'
  t.removeEventListener('dragover', dragOver)
  t.removeEventListener('drop', drop)
}

function dragStart(e){
  e.dataTransfer.setData('text/plain', e.target.id);
  e.dataTransfer.effectAllowed = 'move';
}

function dragOver(e){
  e.preventDefault();
}

function drop(e){
  var data = e.dataTransfer.getData('text/plain');
  e.preventDefault();
  e.target.parentElement.appendChild(document.getElementById(data));
}

function alertLeave(){
  //alert('mouseleave')
}

body {
  display: flex;
  justify-content: space-around;
}

div {
  width: 50px;
  height: 50px;
}

#draggable {
  background: purple;
}

#target {
  border: solid 3px black;
}

<div id="draggable"></div>
<div id="target"></div>

Answer 1

问题是，当您尝试抓住靠近其右边缘的左侧元素时，mouseleave 在您将鼠标向右移动时立即被触发，而dragstart 有机会被触发。这段代码sn-p中可以看到事件：

var d = document.getElementById('draggable')
var t = document.getElementById('target')

d.addEventListener('mousedown', doThis)
d.addEventListener('mouseleave', thenThis)

function doThis(){
  console.log('mousedown');
  d.setAttribute('draggable', true);
  d.addEventListener('dragstart', dragStart);
  t.style.background = 'black';
  t.addEventListener('dragover', dragOver);
  t.addEventListener('drop', drop);
}

function thenThis(){
  console.log('mouseleave');
  d.setAttribute('draggable', false);
  d.removeEventListener('dragstart', dragStart);
  t.style.background = 'none';
  t.removeEventListener('dragover', dragOver);
  t.removeEventListener('drop', drop);
}

function dragStart(e){
  console.log('dragstart');
  e.dataTransfer.setData('text/plain', e.target.id);
  e.dataTransfer.effectAllowed = 'move';
}

function dragOver(e){
  e.preventDefault();
}

function drop(e){
  var data = e.dataTransfer.getData('text/plain');
  e.preventDefault();
  e.target.parentElement.appendChild(document.getElementById(data));
}

body {
  display: flex;
  justify-content: space-around;
}

.square {
  width: 50px;
  height: 50px;
}

#draggable {
  background: purple;
}

#target {
  border: solid 3px black;
}

<div id="draggable" class="square"></div>
<div id="target" class="square"></div>

为避免这种情况，您可以capture the mouse 而不是处理mouseleave。一旦拖动操作开始，您可以释放鼠标捕获并依赖dragend 事件。当用户释放鼠标（如果元素未被拖动）或拖动操作结束时，可拖动元素的属性将被重置。

var d = document.getElementById('draggable')
var t = document.getElementById('target')
var releaseCapture = null;

d.addEventListener('mousedown', mouseDown);
d.addEventListener('dragend', resetDraggableElement);

function mouseDown() {
  releaseCapture = captureMouse(resetDraggableElement);
  d.setAttribute('draggable', true);
  d.addEventListener('dragstart', dragStart);
  t.style.background = 'black';
  t.addEventListener('dragover', dragOver);
  t.addEventListener('drop', drop);
}

function resetDraggableElement() {
  d.setAttribute('draggable', false);
  d.removeEventListener('dragstart', dragStart);
  t.style.background = 'none';
  t.removeEventListener('dragover', dragOver);
  t.removeEventListener('drop', drop);
}

function dragStart(e) {
  if (releaseCapture) {
    releaseCapture();
    releaseCapture = null;
  }
  e.dataTransfer.setData('text/plain', e.target.id);
  e.dataTransfer.effectAllowed = 'move';
}

function dragOver(e) {
  e.preventDefault();
}

function drop(e) {
  var data = e.dataTransfer.getData('text/plain');
  e.preventDefault();
  e.target.parentElement.appendChild(document.getElementById(data));
}

function captureMouse(mouseUpHandler) {
  var releaseCapture = function() {
    document.removeEventListener("mouseup", lostCaptureHandler, false);
  }
  var lostCaptureHandler = function() {
    releaseCapture();
    if (mouseUpHandler) {
      mouseUpHandler();
    }
  };
  document.addEventListener("mouseup", lostCaptureHandler, false);
  return releaseCapture;
}

body {
  display: flex;
  justify-content: space-around;
}

.square {
  width: 50px;
  height: 50px;
}

#draggable {
  background: purple;
}

#target {
  border: solid 3px black;
}

<div id="draggable" class="square"></div>
<div id="target" class="square"></div>