前端系列——HTML5,Vue拖拽

前端系列——HTML5,Vue拖拽

  • HTML5拖拽
    • 拖拽目标触发的事件
    • 释放目标时触发的事件
    • 阻止默认事件方法执行
    • DataTransfer传递媒介
      • 方法
        • 设置自身
        • 设置图像
    • 示例代码1
      • 效果截图
    • 示例代码2
      • 效果截图
  • Vue-Draggable插件拖拽
    • 文档
    • 安装
    • 导入

HTML5拖拽

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

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

前端系列——HTML5,Vue拖拽_第1张图片

拖拽目标触发的事件

  1. ondragstart: 开始拖拽触发
  2. ondrag: 正在拖拽触发
  3. ondragend: 结束拖拽触发

释放目标时触发的事件

  1. ondragenter:进入容器内触发
  2. ondragover:拖动对象在另一个对象容器范围内触发
  3. ondragleave:拖动对象离开容器触发
  4. ondrop:释放鼠标触发

阻止默认事件方法执行

Event.preventDefault()

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

DataTransfer传递媒介

Event.dataTransfer()

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

方法

  1. setData(type,data):声明所发送的数据与类型
  2. getData(type):返回指定类型的数据
  3. clearData(type):删除指定类型的数据
  4. 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>Documenttitle>
  <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>

效果截图

前端系列——HTML5,Vue拖拽_第2张图片

前端系列——HTML5,Vue拖拽_第3张图片

示例代码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>

效果截图

前端系列——HTML5,Vue拖拽_第4张图片

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,
        },

你可能感兴趣的:(笔记,vue,前端,html,html5,vue,vue-draggable,draggable)