前端js 元素拖拽案例

最新推荐文章于 2024-07-18 18:27:33 发布

ordinary90

最新推荐文章于 2024-07-18 18:27:33 发布

阅读量883

点赞数 20

分类专栏：前端全栈开发文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zxcv321zxcv/article/details/139459495

版权

前端全栈开发专栏收录该内容

152 篇文章 0 订阅

订阅专栏

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">
      <div
        v-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拖拽功能。你可以根据实际需求来改变样式和逻辑。

三种实现方式的区别

js原生实现元素拖拽需要使用drag事件和相关的属性和方法。我们需要通过监听dragstart事件来开始拖拽，监听dragend事件来结束拖拽，并且要设置draggable属性为true。然后，结合一些计算和样式修改，可以实现元素的拖拽效果。这种方式相对底层，需要手动处理一些细节。

jquery拖拽则是通过jquery提供的拖拽插件实现。可以通过调用相关的方法和设置一些选项来实现拖拽效果。这种方式相对简单，不需要手动处理太多细节。

vue拖拽则是结合了vue框架的特点，使用vue的指令和响应式数据来实现拖拽效果。可以通过监听元素的drag事件和相关的指令来实现拖拽，并且可以直接在模板中使用数据绑定来处理元素位置的更新。这种方式相对简洁和灵活，适合在vue项目中使用。

总结来说，js原生实现拖拽相对底层，jquery拖拽相对简单，vue拖拽相对简洁和灵活。选择哪种方式取决于项目需求和个人喜好。

ordinary90

关注

20
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端js 元素拖拽案例

在上面的代码中，我们定义了一个可拖拽的红色方块元素，并给它添加了一个类名.draggable。通过方法获取到该元素，并添加了mousedownmousemove和mouseup事件监听器。当用户按下鼠标按钮时，会触发mousedown事件，在该事件处理程序中，我们设置isDragging变量为true，并记录下鼠标与元素左上角的偏移值。当用户移动鼠标时，会触发mousemove事件，在该事件处理程序中，我们判断如果isDragging为true，则根据鼠标移动的位置和偏移值来更新元素的left和top。
复制链接

扫一扫