vue实现div拖拽互换位置


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了vue实现div拖拽互换位置的具体代码,供大家参考,具体内容如下

template模板

<transition-group tag="div" class="container">
 <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}"
  draggable="true"
 @dragstart="handleDragStart($event, item)"
  @dragover.prevent="handleDragOver($event, item)"
  @dragenter="handleDragEnter($event, item)" 
  @dragend="handleDragEnd($event, item)" >
 </div>
</transition-group>

script:

<script>
export default {
 name: 'Toolbar',
 data () {
 return {
  items: [
  { key: 1, color: '#ffebcc'},
  { key: 2, color: '#ffb86c'},
  { key: 3, color: '#f01b2d'}
  ],
  
  dragging: null
 }
 },
 methods:{
 handleDragStart(e,item){
  this.dragging = item;
 },
 handleDragEnd(e,item){
  this.dragging = null
 },
 //首先把div变成可以放置的元素,即重写dragenter/dragover
 handleDragOver(e) {
  e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
 },
 handleDragEnter(e,item){
  e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
  if(item === this.dragging){
   return
  }
  const newItems = [...this.items]
  console.log(newItems)
  const src = newItems.indexOf(this.dragging)
  const dst = newItems.indexOf(item)
 
  newItems.splice(dst, 0, ...newItems.splice(src, 1))
 
  this.items = newItems
 }
 }
}
</script>
 
<style scoped>
 .container{
  width: 80px;
  height: 300px;
  position: absolute;
  left: 0;
  display:flex;
  flex-direction: column;
  padding: 0;
 }
 .item {
  margin-top: 10px;
  transition: all linear .3s
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
js图片预加载示例
Apr 30 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 #Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 #Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 #Javascript
Vue组件Draggable实现拖拽功能
Dec 01 #Javascript
BootStrap modal实现拖拽功能
Dec 01 #Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 #Javascript
BootStrap table实现表格行拖拽效果
Dec 01 #Javascript
You might like
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php实现微信发红包
2015/12/05 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Javascript中Event属性搜集整理
2013/09/17 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
详解Python函数作用域的LEGB顺序
2016/05/14 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python笔试面试题小结
2019/09/07 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python 如何测试文件是否存在
2020/07/31 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
情侣吵架检讨书
2014/02/05 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
优秀员工评优方案
2014/06/13 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
2015年少先队活动总结
2015/03/25 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
Python循环之while无限迭代
2022/04/30 Python