前端js 元素拖拽案例

js原生元素拖拽案例

下面是一个简单的使用原生 JavaScript 实现元素拖拽的代码示例：

<!DOCTYPE html>
<html>
<head><style>.draggable {width: 100px;height: 100px;background-color: red;position: absolute;cursor: move;}</style>
</head>
<body><div class="draggable"></div><script>window.onload = function() {var draggable = document.querySelector('.draggable');var isDragging = false;var offsetX = 0;var offsetY = 0;draggable.addEventListener('mousedown', function(event) {isDragging = true;offsetX = event.clientX - draggable.offsetLeft;offsetY = event.clientY - draggable.offsetTop;});document.addEventListener('mousemove', function(event) {if (isDragging) {draggable.style.left = (event.clientX - offsetX) + 'px';draggable.style.top = (event.clientY - offsetY) + 'px';}});document.addEventListener('mouseup', function() {isDragging = false;});};</script>
</body>
</html>

在上面的代码中，我们定义了一个可拖拽的红色方块元素，并给它添加了一个类名 .draggable。通过 querySelector 方法获取到该元素，并添加了 mousedown、mousemove 和 mouseup 事件监听器。

当用户按下鼠标按钮时，会触发 mousedown 事件，在该事件处理程序中，我们设置 isDragging 变量为 true，并记录下鼠标与元素左上角的偏移值。

当用户移动鼠标时，会触发 mousemove 事件，在该事件处理程序中，我们判断如果 isDragging 为 true，则根据鼠标移动的位置和偏移值来更新元素的 left 和 top 属性，使元素跟随鼠标移动。

当用户释放鼠标按钮时，会触发 mouseup 事件，在该事件处理程序中，我们将 isDragging 设置为 false，停止拖拽操作。

通过上述代码，你可以实现一个简单的拖拽效果。你可以尝试在浏览器中运行上述代码，点击并拖拽红色方块，看看效果如何。

jquery拖拽案例

以下是一个使用jQuery实现拖拽的案例：

HTML代码：

<div id="drag-element" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

JavaScript代码：

$(document).ready(function(){// 设置drag-element元素可拖拽$("#drag-element").draggable();
});

在上面的代码中，我们使用了jQuery的draggable()方法将#drag-element元素设置为可拖拽。你可以根据自己的需要调整元素的样式和位置。

vue拖拽案例

下面是一个简单的vue拖拽案例，其中包含了一个可拖拽的元素列表和一个目标区域。通过拖拽元素到目标区域，可以改变元素的位置。

<template><div><div class="drag-container"><divv-for="(item, index) in items":key="item.id"class="drag-item":style="{ top: item.top + 'px', left: item.left + 'px' }"draggable="true"@dragstart="dragStart(index)"@dragend="dragEnd">{{ item.name }}</div></div><div class="drop-container" @drop="drop" @dragover="allowDrop">Drop Here</div></div>
</template><script>
export default {data() {return {items: [{ id: 1, name: "Item 1", top: 0, left: 0 },{ id: 2, name: "Item 2", top: 0, left: 0 },{ id: 3, name: "Item 3", top: 0, left: 0 }],draggedIndex: null};},methods: {dragStart(index) {this.draggedIndex = index;},dragEnd() {this.draggedIndex = null;},allowDrop(event) {event.preventDefault();},drop(event) {event.preventDefault();const targetIndex = event.target.dataset.index;if (this.draggedIndex !== null) {const draggedItem = this.items.splice(this.draggedIndex, 1)[0];this.items.splice(targetIndex, 0, draggedItem);this.draggedIndex = null;}}}
};
</script><style scoped>
.drag-container {height: 200px;border: 1px solid #ccc;display: flex;flex-direction: column;
}.drag-item {background-color: #f1f1f1;border: 1px solid #ccc;padding: 10px;margin-bottom: 5px;
}.drop-container {height: 100px;border: 1px dashed #ccc;margin-top: 10px;display: flex;align-items: center;justify-content: center;
}
</style>

在这个案例中，我们使用v-for指令将items中的数据渲染为可拖拽的元素列表。我们给每个元素设置了draggable="true"属性，并监听了dragstart和dragend事件来更新draggedIndex。

目标区域使用drop和dragover事件来实现拖拽元素到目标区域的效果。在drop事件中，我们获取目标位置的索引并将拖拽的元素插入到items中相应的位置。

通过这个案例，你可以实现一个简单的vue拖拽功能。你可以根据实际需求来改变样式和逻辑。