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直接移动到另一个，则第一次完美地工作。

但有两个问题：

如果用户在div之外释放鼠标按钮，然后点击另一个，mouseup仍会运行。
在第一次之后的任何时间，用户必须在div之外点击才能使处理程序正常工作。

Answer 1

你应该改变你的方法：

var isDragging = false;
var dragElement = null;

$('#red, #blue').mousedown(function() {
   dragElement = $(this);
   isDragging = true;
});

$('#red, #blue').mouseup(function() {
    if(isDragging && dragElement){ 
        alert('Dragged in',dragElement);
        dragElement = null;
        isDragging = false;
    }
});

$('body *:not(#red, #blue)').mouseup(function() {
    if(isDragging && dragElement){ 
        alert('Not dragged',dragElement);
        dragElement = null;
        isDragging = false;
    }
});

还有一个问题：Draggable div without jQuery UI

Answer 2

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

注意：.one()（一个未打开）用于绑定一次性事件处理程序，一旦被触发就会被删除。这可以防止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>

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

2 个答案: