javascript - 判断鼠标是否从一个 div 拖到另一个

Question

我的页面包含一个红色和一个蓝色 div:

<div id="red"></div>
<div id="blue"></div>

它们都是绝对定位的，并且相距很小:

#red {
    background-color: red;
    width: 5em;
    height: 5em;
    position: absolute;
    left: 5em;
    top: 5em;
}

#blue {
    background-color: blue;
    width: 5em;
    height: 5em;
    position: absolute;
    left: 15em;
    top: 5em;
}

我有一些代码可以判断用户是否单击并将鼠标从一个 div 拖动到另一个:

$('#red').mousedown( function () {
    $('#blue').mouseup( function () {
        alert('Red to Blue')
    })
})

$('#blue').mousedown( function () {
    $('#red').mouseup( function () {
        alert('Blue to Red')
    })
})

如果用户在按住鼠标按钮的情况下将鼠标直接从一个 div 移动到另一个，这在第一次时会完美运行。

不过有两个问题:

1. 如果用户在 div 之外释放鼠标按钮，然后点击另一个，mouseup 仍会运行。
2. 在第一次之后的任何时候，用户都必须在任一 div 之外单击，以便处理程序正常工作。

Answer 1

mouseup 事件应该在发生时立即删除(使用 .one() )，并且应该在 div 之外检测到它。此外，我们需要通过使用 event.preventDefault() 来防止 mousedown 的默认行为。解决第二个问题。请参阅代码中的注释。

备注:.one() (one not on) 用于绑定(bind)一次性事件处理程序，该处理程序一经触发即被删除。这可以防止 mouseup 事件多次附加到文档。

var $red = $('#red')
var $blue = $('#blue');

$($.merge($red, $blue)).mousedown(function(e) {
  e.preventDefault(); // prevent the default behavior of mousedown
  var source = $(e.target);

  // attach the mouseup to the document as one time event to detect up
  $(document).one('mouseup', function(e) {
    // check if the source is red and the target is blue
    if ($blue.is(e.target) && source.is($red)) {
      alert('Red to Blue');
    } // check if the source is red and the target is blue
      else if ($red.is(e.target) && source.is($blue)) {
      alert('Blue to Red');
    }
  })
});

#red {
  background-color: red;
  width: 5em;
  height: 5em;
  position: absolute;
  left: 5em;
  top: 5em;
}

#blue {
  background-color: blue;
  width: 5em;
  height: 5em;
  position: absolute;
  left: 15em;
  top: 5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red"></div>

<div id="blue"></div>

还有一个更通用的解决方案，它使用 data-* 属性来识别源和目标:

$('[data-color]').mousedown(function(e) {
  e.preventDefault(); // prevent the default behavior of mousedown
  var source = $(e.target).attr('data-color'); // get the source data color

  // attach the mouseup to the document as one time event to detect up
  $(document).one('mouseup', function(e) {
    var target = $(e.target).attr('data-color'); // 
    
    if(target !== undefined && source !== target) {
      alert(source + ' to ' + target);
    }
  })
});

div[data-color] {
  position: absolute;
  width: 5em;
  height: 5em;
}

#red {
  left: 5em;
  top: 1em;
  background-color: red;
}

#blue {
  left: 15em;
  top: 1em;
  background-color: blue;
}

#yellow {
  left: 5em;
  top: 10em;
  background-color: yellow;
}

#green {
  left: 15em;
  top: 10em;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- set data-type with the color to each element -->
<div id="red" data-color="Red"></div>

<div id="blue" data-color="Blue"></div>

<div id="yellow" data-color="Yellow"></div>

<div id="green" data-color="Green"></div>