你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

前端实现拖放功能的方法

2021/11/1 11:45:39

前言

前段时间有一个朋友问我前端能否实现拖放功能,大体是用拖放来调整列表顺序。
虽然我没有做过,但我见过有这种功能这样的网站呀,所以毫不犹豫的说绝对可以实现(反正不是我写)。
谁知道才过去不到一周,我自己所就职的公司也要添加一个拖放功能,而且还升级了,比拖放改变列表顺序难度更大。。。。,没办法,做呗。
好在我在我朋友问我的时候去网上查了下资料,看到了html5中有这么一个功能。
话不多说,开始干吧。

实现方法

一、什么是拖放

菜鸟教程-拖放功能
简单来说,就是把一个元素拖到另一个地方,并完成相应的功能。
官方的教程写的已经比较详细了,但描述太过官方,阅读体验未必有那么好。

二、实现步骤

1、设置元素为可拖动

把需要拖放的元素 draggable 属性设置为 true,这个属性每个元素都有,不过默认是false

<div draggable="true"></div>

这时候尝试用鼠标拖动,发现已经可以拖动了,但会显示一个禁止的图标,这是因为没有可放置的区域。
效果图
截图无法截取那个禁止图标

2、创建可放置的区域

创建区域也很简单,只需要在标签上添加 ondragover 和 ondrop 方法即可,表示这个区域可放置并进行处理。

<div @drop.prevent="drop" @dragover.prevent="dragover"></div>

效果图

3、添加拖动方法

只需要在需要拖动的元素上添加 ondragstart 方法即可

<div draggable="true" @dragstart="dragstart()"></div>

三、完整代码

我是用vue写的demo,这样比较简洁一点,为了方便操作,我添加了删除功能,
代码如下:

<template>
  <div class="body flex">
    <div draggable="true"></div>
    <ul>
      <li
        draggable="true"
        :ref="'li' + index + 1"
        v-for="(item, index) in list"
        :key="index"
        @dragstart="dragstart(index)"
      >
        {{ item }}
      </li>
    </ul>
    <div class="box center" @drop.prevent="drop" @dragover.prevent="dragover">
      <div class="delete" @click="deleteBox()">删除</div>
      <p v-show="content">{{ text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      list: [
        "拖放内容1",
        "拖放内容2",
        "拖放内容3",
        "拖放内容4",
        "拖放内容5",
        "拖放内容6"
      ],
      text: "",
      content: false
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    deleteBox() {
      this.content = false;
    },
    // 拖动开始
    dragstart(index) {
      this.text = "您已成功拖放元素" + (index + 1);
    },
    // 进行放置
    drop(event) {
      this.content = true;
      console.log("drop", event);
    },
    // 放置位置 - 阻止默认事件
    dragover(event) {
      event.preventDefault();
    }
  }
};
</script>
<style lang="scss" scoped>
.body {
  user-select: none; // 禁止选中文字
  margin: 20px;
  font-size: 16px;
  ul {
    li {
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 10px;
      padding: 5px 10px;
      line-height: 26px;
      background-color: rgb(221, 221, 221);
    }
  }
  .box {
    position: relative;
    margin-left: 100px;
    width: 500px;
    height: 500px;
    border: 1px solid #999;
    .delete {
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      padding: 5px 10px;
      background-color: rgba(243, 89, 84, 0.3);
      border-radius: 5px 0px 5px 5px;
    }
    .delete:hover {
      color: #fff;
      background-color: rgb(243, 89, 84);
    }
    p {
      font-size: 26px;
      font-weight: bold;
      animation: light 1s linear 1;
    }
  }
  @keyframes light {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>

最终效果如下:

效果图
over…