用javaScrip写一个元素拖拽且带吸附到其他元素的功能
时间: 2024-05-01 22:18:49 浏览: 11
好的,下面是代码实现:
```javascript
var dragElement = document.getElementById("drag-element");
var targetElements = document.getElementsByClassName("target-element");
dragElement.addEventListener("mousedown", function(event) {
var shiftX = event.clientX - dragElement.getBoundingClientRect().left;
var shiftY = event.clientY - dragElement.getBoundingClientRect().top;
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
function onMouseMove(event) {
dragElement.style.left = event.pageX - shiftX + "px";
dragElement.style.top = event.pageY - shiftY + "px";
for (var i = 0; i < targetElements.length; i++) {
var targetElement = targetElements[i];
var targetRect = targetElement.getBoundingClientRect();
if (event.pageX > targetRect.left && event.pageX < targetRect.right &&
event.pageY > targetRect.top && event.pageY < targetRect.bottom) {
targetElement.classList.add("targeted");
} else {
targetElement.classList.remove("targeted");
}
}
}
function onMouseUp(event) {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
for (var i = 0; i < targetElements.length; i++) {
var targetElement = targetElements[i];
if (targetElement.classList.contains("targeted")) {
targetElement.appendChild(dragElement);
}
}
}
});
```
这段代码实现了一个元素拖拽且带吸附到其他元素的功能。拖拽的元素是 `drag-element`,吸附的目标元素是具有 `target-element` 类名的元素。当拖拽元素移动到目标元素的范围内时,目标元素会高亮显示。当拖拽元素松开鼠标时,如果它在目标元素的范围内,则会被吸附到目标元素内。