JS拖動元素詳解

一、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;
});