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 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jQuery基础知识小结
2014/12/22 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
JS实现随机点名器
2020/04/12 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python构建网页爬虫原理分析
2017/12/19 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
django+echart数据动态显示的例子
2019/08/12 Python
Django app配置多个数据库代码实例
2019/12/17 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
面试后的感谢信范文
2014/02/01 职场文书
银行金融服务方案
2014/06/11 职场文书
大专学生求职自荐信
2014/07/06 职场文书
医学检验专业自荐信
2014/09/18 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
宾馆安全管理制度
2015/08/06 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书