JS拖动元素详解

发布时间：2023-05-18

一、JS拖动元素放大

通过JS可以实现拖动元素时的放大效果，可以让用户更清楚地看到元素的细节。实现方法如下：

<!-- HTML代码 -->
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

// JS代码
var box = document.getElementById('box');
box.addEventListener('mousedown', function(e){
  e.target.style.transform = 'scale(1.2)';
});
box.addEventListener('mouseup', function(e){
  e.target.style.transform = 'scale(1)';
});

二、JS拖动元素不流畅

有时在使用JS实现拖动元素时，用户会感觉到元素拖动过程中不够流畅，这是因为JS事件处理过程中没有减少重绘和回流，可以通过以下方法解决：

<!-- HTML代码 -->
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

// JS代码
var box = document.getElementById('box');
var dragging = false;
var originX, originY, deltaX, deltaY;
box.addEventListener('mousedown', function(e) {
  dragging = true;
  originX = e.clientX;
  originY = e.clientY;
});
document.addEventListener('mousemove', function(e) {
  if (!dragging) return;
  deltaX = e.clientX - originX;
  deltaY = e.clientY - originY;
  box.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
});
document.addEventListener('mouseup', function() {
  dragging = false;
  box.style.transform = 'unset';
});

三、JS拖动元素在盒子内

有时候我们需要限定元素只能在一个特定的区域内拖动，如下所示：

<!-- HTML代码 -->
<div id="box" style="position: relative; width: 100px; height: 100px; border: 1px solid black;">
  <div id="inner-box" style="position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: red;"></div>
</div>

// JS代码
var innerBox = document.getElementById('inner-box');
var dragging = false;
var originX, originY, deltaX, deltaY;
var box = document.getElementById('box');
var boxOffset = box.getBoundingClientRect();
document.addEventListener('mousedown', function(e) {
  if (e.target !== innerBox) return;
  dragging = true;
  originX = e.clientX;
  originY = e.clientY;
});
document.addEventListener('mousemove', function(e) {
  if (!dragging) return;
  deltaX = e.clientX - originX;
  deltaY = e.clientY - originY;
  var newX = Math.min(Math.max(boxOffset.left, innerBox.offsetLeft + deltaX), boxOffset.right - innerBox.offsetWidth);
  var newY = Math.min(Math.max(boxOffset.top, innerBox.offsetTop + deltaY), boxOffset.bottom - innerBox.offsetHeight);
  innerBox.style.transform = 'translate(' + newX + 'px, ' + newY + 'px)';
});
document.addEventListener('mouseup', function() {
  dragging = false;
});

四、JS拖动原理

JS实现拖动的原理是通过监听鼠标事件，获取鼠标在页面中的位置，然后将元素的位置根据鼠标的位置进行偏移，从而实现元素的拖动。

五、JS动态添加元素

有时候我们需要动态地添加元素并实现拖动效果。可以通过以下方法实现：

<!-- HTML代码 -->
<div id="container" style="width: 100px; height: 100px; border: 1px solid black;"></div>

// JS代码
var container = document.getElementById('container');
function createBox() {
  var box = document.createElement('div');
  box.style.width = '50px';
  box.style.height = '50px';
  box.style.background = 'red';
  box.style.position = 'absolute';
  box.addEventListener('mousedown', function(e) {
    dragging = true;
    originX = e.clientX;
    originY = e.clientY;
    e.stopPropagation();
  });
  document.addEventListener('mousemove', function(e) {
    if (!dragging) return;
    deltaX = e.clientX - originX;
    deltaY = e.clientY - originY;
    var newX = Math.min(Math.max(0, box.offsetLeft + deltaX), container.offsetWidth - box.offsetWidth);
    var newY = Math.min(Math.max(0, box.offsetTop + deltaY), container.offsetHeight - box.offsetHeight);
    box.style.transform = 'translate(' + newX + 'px, ' + newY + 'px)';
  });
  document.addEventListener('mouseup', function() {
    dragging = false;
  });
  return box;
}
container.appendChild(createBox());

六、JS鼠标点击拖动事件

除了鼠标拖动事件外，还可以使用鼠标点击事件来实现拖动效果，实现方法如下：

<!-- HTML代码 -->
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

// JS代码
var box = document.getElementById('box');
var dragging = false;
var originX, originY, deltaX, deltaY;
box.addEventListener('mousedown', function(e){
  dragging = true;
  originX = e.clientX;
  originY = e.clientY;
});
box.addEventListener('mouseup', function(){
  dragging = false;
});
box.addEventListener('mousemove', function(e){
  if (!dragging) return;
  deltaX = e.clientX - originX;
  deltaY = e.clientY - originY;
  box.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
});
box.addEventListener('click', function(e){
  e.stopPropagation();
});

七、JS拖拽元素到另一个元素选取

有时候我们需要实现将一个元素从一个区域拖拽到另一个区域，并且在另一个区域中选中该元素的效果，可以通过以下代码实现：

<!-- HTML代码 -->
<div id="source" style="width: 100px; height: 100px; background-color: red;"></div>
<div id="target" style="width: 100px; height: 100px; background-color: green;"></div>

// JS代码
var source = document.getElementById('source');
var target = document.getElementById('target');
var selectedBox = null;
var dragging = false;
var originX, originY, deltaX, deltaY;
source.addEventListener('mousedown', function(e){
  selectedBox = e.target.cloneNode(true);
  selectedBox.style.position = 'absolute';
  selectedBox.style.opacity = '0.5';
  selectedBox.style.transform = 'scale(0.8)';
  selectedBox.style.pointerEvents = 'none';
  document.body.appendChild(selectedBox);
  dragging = true;
  originX = e.clientX;
  originY = e.clientY;
});
target.addEventListener('mousemove', function(e){
  if (!dragging) return;
  deltaX = e.clientX - originX;
  deltaY = e.clientY - originY;
  selectedBox.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
});
target.addEventListener('mouseup', function(e){
  if (!selectedBox) return;
  selectedBox.style.transform = '';
  selectedBox.style.opacity = '1';
  selectedBox.style.pointerEvents = '';
  target.appendChild(selectedBox);
  selectedBox = null;
  dragging = false;
});
推荐文章