菜单 搜索
首页 前端知识 HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。

HTML5 拖放（Drag 和 Drop）html排序拖拽案例，vue仿照element穿梭框拖拽案例。

2024-02-11 10:02:25 前端知识 前端哥 591 488 我要收藏

vue版本 

 

drag常见事件

hTMl 5 拖拽 使用拖拽需要在元素标签上设置 draggable = true

dragover 在可拖动的元素或者被选择的文本被拖进一个有效的放置目标后间隔几百毫秒持续进行触发 （简单来说就是拖拽到指定的目标元素就会就行持续触发,一般绑定到需要拖拽元素最外层的盒子）

dragstart 事件在用户开始拖动元素或被选择的文本时调用

dragleave 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发

dragend 事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）。

drop 事件在元素或选中的文本被放置在有效的放置目标上时被触发

drag 事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。

dragenter 事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发

html5 排序拖拽 

<!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>拖拽</title>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .list{
        width: 400px;
        height: 500px;
        padding: 10px;
         background-color: #ccc;
    }
    .list p {
        width: 100%;
        height: 40px;
        margin: 10px 0 10px 0;
        text-align: center;
        line-height: 40px;
        background-color: #fff;
        box-shadow: 2px  3px 4px #fff;
    }
    li{
        list-style: none;
    }
    .dragging{
        opacity: 0;
    }
    .drag-body {
        display: flex;
        justify-content: space-around;
    }
</style>
<body class="grid_line">
<div class="drag-body">
  <div class="list" style="margin-top: 20px">
  </div>
</div>
</body>
<script>

    ;(()=> {
        let listData = [1,2,4,5,6]

        const init = () =>{
            render()// 渲染dom函数
            bindEvent() // 绑定所有dom事件处理函数

        }

        function render() {
            let list = document.querySelector('.list')
            list.appendChild(renderList())
        }

        function bindEvent() {
           let dragItems = document.querySelectorAll('.dragItem')
            let dragList = document.querySelectorAll('.dragList')
            dragList[0].addEventListener('dragover',dragoverListHandle,false)
            window.addEventListener('dragover',(e) => e.preventDefault(),false)
            dragItems.forEach(ele => {
                ele.addEventListener('dragstart',dragstartHandle,false)
                ele.addEventListener('dragend',dragendHandle,false)
            })
        }


        // 拖拽函数处理
        function dragstartHandle (ev) {
          // 拖拽开始异步执行隐藏元素
          setTimeout(() =>{this.classList.add('dragging')},0)
          // // 你拖拽了哪个元素就给哪个元素设置一个唯一的标识 可以通过 getData 拿到设置标识的元素。
          if(ev.dataeTransfer)  ev.dataeTransfer.setData("Text",ev.target.id);
        }

        function dragendHandle() {
            this.classList.remove('dragging')
        }

        function dragoverListHandle(e){
             e.preventDefault()
             // 根据类名获取当前拖债的元素。
            const dragging = this.querySelector('.dragging')
             // 获取所有非包含当前拖债的元素
            const dragItems = this.querySelectorAll('.dragItem:not(.dragging)')
            /*
            * clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。
            * offsetTop 返回一个整数，表示该元素的顶部偏移量，单位是像素 px。
            *  offsetHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px。
            * */
            // 假设盒子向上拖拽 e.clientY 获取当前的盒子里面鼠标 y 轴方向移动的位置，当移动的位置小于等于了上一个元素y轴方向的位置（item.offsetTop + item.offsetHeight / 2），交换dom位置
            // 核心逻辑就是拖拽的元素的位置小于等于了上一个元素底部的位置就交换位置
            const dragItme = [...dragItems].find(item => {
               return  e.clientY <= item.offsetTop + item.offsetHeight / 2
            })
            this.insertBefore(dragging,dragItme)
        }

       // 渲染自定义的ui > li
        function renderList( ) {
            let ul = document.createElement('ul')
            ul.className = 'dragList'
            listData.forEach((item,index) => {
                let li = document.createElement('li')
                li.className = 'dragItem'
                li.draggable = true
                li.innerHTML = `<p>${item}</p>`
                li.id = index
                ul.appendChild(li)
            })
            return ul
        }

        init() // 初始化调用函数
    })()

</script>
</html>

vue仿照element穿梭框支持拖拽功能

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="50%"
    :before-close="handleClose">
    <div id="box">
      <!----start 左侧隐藏区 --start-->
      <div class="box">
        <div class="title">
            <span
            >切换字段</span>
          <span>{{leftList.length}}</span>
        </div>
        <div class="search_parent">
          <input class="search_input"
                 type="text"  placeholder="请输入搜索内容"
                 @input="leftInputChange($event)"
          >
        </div>
        <!--@drop拖放事件 我们需要对被拖放元素添加@dragover.prevent来阻止浏览器执行与事件关联的默认动作. -->
        <div  class="left" @dragover.prevent  @drop="dropHandle($event,2)" >
          <!-- draggable Boolean值
          @dragstart：拖拽开始事件，可绑定于被拖拽元素上
          @dragend：拖拽结束事件，可绑定于被拖拽元素上 -->
          <div
            class="hover-color"
            v-for="(item,index) in leftList"
            :key="item.id"
            @click="leftListHandle(item,index)"
            :class="{active:leftIndexs.includes(item.id)}"
            draggable="true"
            @dragstart="dragStartHandler($event,item)"
            @dblclick="dbHandler(item,'left')"
          >{{item.name}}
          </div>
        </div>
      </div>
      <!----end 左侧隐藏区 --end-->
      <div class="middle">
        <div  :class="{active:rightIndex.length > 0 && rightList.length > 0 }" @click="btnSendHandler('left')"><i
          class="el-icon-arrow-left"
        ></i></div>
        <div :class="{active:leftIndexs.length > 0 && leftList.length > 0 }"  @click="btnSendHandler('right')"><i
          class="el-icon-arrow-right"
        ></i></div>
      </div>
      <!----start 右侧显示区 --start-->
      <div class="box">
        <div class="title">
            <span
            >显示字段</span>
          <span>{{rightList.length}}</span>
        </div>

        <div class="search_parent">
          <input class="search_input"
                 type="text"
                 placeholder="请输入搜索内容"
                 @input="rightInputChange($event)"
          >
        </div>
        <!-- 我们需要对被拖放元素添加@dragover.prevent来阻止浏览器执行与事件关联的默认动作. -->
        <div class="right"  @dragover.prevent @drop="dropHandle($event,1)">
          <div
            v-for="(item,index) in rightList"
            :key="item.id"
            @click="rightListHandle(item,index)"
            :class="{active:rightIndex.includes(item.id)}"
            class="hover-color"
            draggable="true"
            @dragstart="dragStartHandler($event,item)"
            @dblclick="dbHandler(item,'right')"
          >{{item.name}}
          </div>
        </div>
      </div>
      <!----end 右侧显示区 --end-->
    </div>
    <!-- footer -->
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="saveHandle"> 保存 </el-button>
  </span>
  </el-dialog>
</template>
<script>

export default {
  data() {
    return{
      leftList:[{name:'小东瓜',id:55456},{name:'Hello word',id:254},{name:'小樱桃',id:266}],
      rightList:[ {name:'大西瓜',id:332643},{name:'小葡萄',id:56434},],
      leftIndexs:[],
      rightIndex:[],
      cloneLeftList:[],
      cloneRightList:[],
      isDown:false,
      cacheIndex:[],
    }
  },
  props:{
    visible:false,
    title:''
  },
  created() {
    this.cloneData()
  },
  methods:{
    handleClose() {
      this.$emit('onClose')
    },
    // 左侧列表点击
    leftListHandle(item,index) {
      this.leftIndexs = [item.id]
      this.rightIndex = []
    },
    // rightBtnSend 右侧按钮传送
    btnSendHandler(type) {
      // 处理数据拼接和增删改查
      if(type == 'left') {
        if(!this.rightList.length || !this.rightIndex.length)return
        let checkedList = this.rightList.find(item => this.rightIndex.includes(item.id))
        this.leftList = this.leftList.concat([checkedList])
        this.rightList = this.rightList.filter(item => !this.rightIndex.includes(item.id))
        // 克隆的的数据处理
        this.cloneLeftList = this.cloneLeftList.concat([checkedList])
        this.cloneRightList = this.cloneRightList.filter(item => !this.rightIndex.includes(item.id))
        this.rightIndex = []
      }else if(type == 'right') {
        if(!this.leftList.length || !this.leftIndexs.length) return
        let checkedList = this.leftList.find(item => this.leftIndexs.includes(item.id))
        this.rightList = this.rightList.concat([checkedList])
        this.leftList = this.leftList.filter(item => !this.leftIndexs.includes(item.id))
        this.cloneRightList = this.cloneRightList.concat([checkedList])
        this.cloneLeftList = this.cloneLeftList.filter(item => !this.leftIndexs.includes(item.id))
        this.leftIndexs = []
      }
     },

    cloneData() {
      this.cloneLeftList = JSON.parse(JSON.stringify(this.leftList))
      this.cloneRightList = JSON.parse(JSON.stringify(this.rightList))
    },


    // 左侧双击
    dbHandler(item,type) {
      if(type == 'left') {
        this.leftListHandle(item)
        this.btnSendHandler('right')
      }else if(type == 'right') {
        this.rightListHandle(item)
        this.btnSendHandler('left')
      }
    },




    // 右侧列表点击
    rightListHandle(item,index) {
      this.rightIndex = [item.id]
      this.leftIndexs = []
    },


    // 保存

    saveHandle() {
      this.$emit('onConfirm',this.rightList)
    },

    // 拖拽设置id
    dragStartHandler(ev,item) {
      ev.dataTransfer.setData("id",item.id);
    },

    // 组织默认时间
    allowDrop(ev) {
      ev.preventDefault()
    },


    // 数据需要拖到哪个盒子就给那个盒子绑定 drop 事件，当你拖到指定的盒子就会触发 drop 事件。
    dropHandle(ev,type) {
      let id = ev.dataTransfer.getData("id");
      if(type === 1) {
        let checkedList = this.leftList.find(item => item.id == id)
        this.rightList = this.rightList.concat([checkedList])
        this.leftList =  this.leftList.filter(item => item.id != id)


        this.cloneRightList = this.cloneRightList.concat([checkedList])
        this.cloneLeftList = this.cloneLeftList.filter(item => item.id != id)
      }else {
        let checkedList = this.rightList.find(item => item.id == id)
        this.leftList = this.leftList.concat([checkedList])
        this.rightList =  this.rightList.filter(item => item.id != id)

        this.cloneLeftList = this.cloneLeftList.concat([checkedList])
        this.cloneRightList = this.cloneRightList.filter(item => item.id != id)
      }
    },


    // 右侧边输入框
    rightInputChange(ev) {
      console.log(ev.target.value)
      this.rightList = this.cloneRightList.filter(item => item.name.includes(ev.target.value))
    },

    // 左侧边输入框
    leftInputChange(ev) {
      console.log(ev.target.value)
      this.leftList = this.cloneLeftList.filter(item => item.name.includes(ev.target.value))
    },

  }
}


</script>
<style>
* {
  margin: 0;
  padding: 0;
}

#box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  border: 1px solid rgb(235, 238, 245);
}

.shuttleFrame .el-dialog__footer {
  padding: 0px 20px 20px 0px !important;
}

.box .title {
  font-size: 14px;
  box-sizing: border-box;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  width: 245px;
  height: 40px;
  line-height: 40px;
  background: #f5f7fa;
}

.box .title span:first-child {
  display: inline-block;
  background-size: 20px 20px;
  padding-left: 35px;
  cursor: pointer;
}

.box .title span:first-child.active {
}

.left, .right {
  width: 245px;
  height: 250px;
  padding: 5px 0;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
}

.left > div, .right > div {
  cursor: pointer;
  text-align: left;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 20px 20px;
  font-size: 14px;
  padding-left: 35px;
  line-height: 30px;
}

.left > div.active, .right > div.active {
  background: #409eff;
  color: #ffffff;
}

.left .hover-color.active:hover, .right .hover-color.active:hover {
  color: #ffffff;
}

.left > div.hover-color:hover, .right > div.hover-color:hover {
  color: rgb(64, 158, 255);
}

.middle {
  margin: 0 20px;
}

.middle > div {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  background-color: #f5f7fa;
  color: #c0c4cc;
}

.middle > div.active {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

.search_parent {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.search_input {
  width: 220px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 14px;
  text-indent: 20px
}



::-webkit-input-placeholder {
  color: rgb(192, 196, 204);
}

:-moz-placeholder {
  color: rgb(192, 196, 204);
}

::-moz-placeholder {
  color: rgb(192, 196, 204);
}

:-ms-input-placeholder {
  color: rgb(192, 196, 204);
}
</style>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1724.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

写在 $(function(){}) 中的函数无法被外界调用原因及解决方式

2024-02-25 11:02:42

jquery中的ajax方法怎样通过JSONP进行远程调用

2024-02-25 11:02:39

前端原生代码打包成.exe文件，HTML css js jquery打包EXE文件

2024-02-25 11:02:33

基于html css javascript jquery bootstarp响应式的鲜花预订网电商模板(21页)

2024-02-25 11:02:26

html css网页制作成品——HTML静态网页作业html css javascript jquery水果商城7页

2024-02-25 11:02:17

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

BCSP-玄子前端开发之JavaScript jQuery入门CH02_JavaScript函数

2024-02-25 11:02:10

浏览器调用摄像头

2024-02-25 11:02:09

JQuery实现切换效果【排他思想】

2024-02-25 11:02:07

大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

【JS逆向】某麻将游戏数据生成JS加密逆向分析探索！

2024-02-22 10:02:34997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！