前端系列——HTML5，Vue拖拽

最新推荐文章于 2023-04-07 21:58:29 发布

简明编程

最新推荐文章于 2023-04-07 21:58:29 发布

阅读量3.1k

点赞数 4

分类专栏：笔记 vue 前端文章标签： html html5 vue vue-draggable draggable

本文链接：https://blog.csdn.net/qq_51553982/article/details/124507613

版权

笔记同时被 3 个专栏收录

334 篇文章 42 订阅

订阅专栏

前端

28 篇文章 10 订阅

订阅专栏

vue

17 篇文章 7 订阅

订阅专栏

前端系列——HTML5，Vue拖拽

HTML5拖拽
Vue-Draggable插件拖拽

HTML5拖拽

使用属性draggable即可实现对于元素的拖拽

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

在这里插入图片描述

拖拽目标触发的事件

ondragstart: 开始拖拽触发
ondrag: 正在拖拽触发
ondragend: 结束拖拽触发

释放目标时触发的事件

ondragenter：进入容器内触发
ondragover：拖动对象在另一个对象容器范围内触发
ondragleave：拖动对象离开容器触发
ondrop：释放鼠标触发

阻止默认事件方法执行

Event.preventDefault()

阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(), 否则ondrop事件不会被触
另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候,默认的动作是显示这个图片或是相关信息，还是真的执行drop。此时需要用document的ondragover事件把它直接干掉

DataTransfer传递媒介

Event.dataTransfer()

用于保存拖动并放下过程中的数据

方法

setData(type,data)：声明所发送的数据与类型
getData(type)：返回指定类型的数据
clearData(type)：删除指定类型的数据
setDragImage(ImageObject,x,y)：设置鼠标选中图像

设置自身

event.dataTransfer().setDragImage(event.target,0,10)

设置图像

const image = new Image()
image.src = '图片位置'
event.dataTransfer().setDragImage(image,0,10)

示例代码1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test1{
      height: 50px;
      width: 60px;
      background-color: #ff00ff;
    }
    #wrap{
      position: absolute;
      top: 20%;
      left: 200px;
      height: 150px;
      width: 152px;
      border: 3px solid #ff00ff;
    }
  </style>
</head>
<body>
  <div draggable="true" id="test1"></div>
  <div id="wrap">

  </div>
  <script>
    var test1 = document.getElementById('test1');
    var wrap = document.getElementById('wrap');
    test1.ondragstart = ()=>{
      console.log('drag start')
    }
    test1.ondrag=()=>{
      console.log('draging')
    }
    test1.ondragend=()=>{
      console.log('drag end')
    }

    wrap.addEventListener('dragenter',()=>{
      console.log('ondragenter')
    })
    wrap.addEventListener('dragover',(event)=>{
      event.preventDefault()
      console.log('ondragover')
    })
    wrap.addEventListener('dragleave',()=>{
      console.log('ondragleave')
    })
    wrap.addEventListener('drag',()=>{
      console.log('ondrag')
    })
  </script>
</body>
</html>

效果截图

在这里插入图片描述

示例代码2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #wrap1{
      position: absolute;
      top: 20px;
      left: 20px;
      height: 200px;
      width: 200px;
    }
    ul{
      height: 200px;
      width: 300px;
    }
    li{
      height: 30px;
      background-color: antiquewhite;
      margin: 5px;
      width: 200px;
    }
    #wrap2{
      height: 200px;
      width: 300px;
      position: absolute;
      top: 200px;
      left: 400px;
      border: 2px solid #fff00f;
    }
  </style>
</head>
<body>
  <div id="wrap1">
    <ul id="u1">
      <li draggable="true">1</li>
      <li draggable="true">2</li>
      <li draggable="true">3</li>
      <li draggable="true">4</li>
    </ul>
  </div>
  <div id="wrap2">
    <ul id="ul2"></ul>
  </div>
  <script>
    var dragItemList = document.querySelectorAll('li')
    var dragItem = null
    var wrap = document.getElementById('ul2')
    for(let i = 0;i < dragItemList.length;i++){
      dragItemList[i].ondragstart = (event)=>{
       
        dragItem = dragItemList[i]
        console.log(dragItem)
  

      }
    }
    wrap.ondragover=(event)=>{
      event.preventDefault()
    }
    wrap.ondrop=()=>{
      console.log(dragItem)
      wrap.appendChild(dragItem)
    }
  </script>
</body>
</html>

效果截图

在这里插入图片描述

Vue-Draggable插件拖拽

最简单的一类插件了，有一点基础的根本不用学，直接看文档

文档

github
点击进行案例尝试

安装

npm i -S vuedraggable

导入

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

import draggable from 'vuedraggable'

export default {
        components: {
            draggable,
        },

简明编程

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
4
评论
前端系列——HTML5，Vue拖拽

前端系列——HTML5拖拽HTML5拖拽拖拽目标触发的事件释放目标时触发的事件阻止默认事件方法执行示例代码效果截图HTML5拖拽使用属性draggable即可实现对于元素的拖拽<div draggable="true" id="test1"></div>拖拽目标触发的事件ondragstart: 开始拖拽触发ondrag: 正在拖拽触发ondragend: 结束拖拽触发释放目标时触发的事件ondragenter：进入容器内触发ondragover：拖动对
复制链接

扫一扫