Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715
项目中遇到的问题:
A - 我需要在项目的拖拽组件中,使用背景
1 - 想到的第一个办法就是通过index根据列表索引添加背景
问题:拖拽是可以换动顺序的,所以不管我怎么拖动,背景的顺序并不不会变。
2 - 第二个办法是,通过动态给列表绑定ID,通过id来添加背景,这总没问题了吧
问题: 很奇怪的问题,我现在也没有理解,换动顺序以后,查看HTML元素,确实id是根据顺序变换了的,但是背景依然没变,例如我给id = a1 添加了背景a1.png,id = a2 添加了背景a2.png,但是换动顺序以后,id = a1 的背景变成了 a2.png,id = a2 的背景则变成了 a1.png,OK,这个办法遇到这种奇怪的问题,也失败了。
3 - 第三个办法,换一个思路,既然拖动对象的属性是会追随对象的,那我完全可以给元素对象添加一个imageSrc用来存储图片地址,将图片地址再赋值给元素,就没问题了
B - 项目中还需要有删除元素功能
1 - 第一个想法是直接根据id,通过remove方法移除html元素
问题: 是可以完美移除,但问题是我只是移除了html元素而已,数组对象依然存在,当我再重新拖动其他元素进来时,会将原本的结构复制出来,打印后印证确实是因为数组依然存在
2 - 第二个想法,通过数组对象查询元素内容,将当前数组唯一标识传入,然后在数组对象中移除
问题: 匹配出错,无法移除当前点击的数组
3 - 第三个想法,既然是移除我点击的当前元素,其实跟内容是无关的,我可以通过列表的索引值index来移除
验证可行,没问题,希望能够帮到遇到同样问题的人
PS:还有个问题如果你会,请指导一下,clone属性怎么使用,我从一个列表移入另一个列表,但我并不希望我原来的消除,看文档有clone属性可以使用,但是各种方法都试了还是不行
更新: 2018-6-21
这次终于实现了m2拖动到m1,并且不删除m2中的元素,并且解决了相同元素值相同的问题!哈哈,不要激动,一步步来看是怎么解决的:
1: 要实现m2中的元素拖到m1,并且m2中的元素并不会被清除,其实我有用过两个办法去解决,因为一切操作都是通过数组,所以想到的办法就是操作数组来实现,vue就是用数据操作视图这么轻松
方法一:创建一个空的数组对象,拖动开始的时候,将m2的数据doing赋值给空对象保存下来:
结束的时候再将保存下来的saveDoing赋值给doing,就可以还原m2
可以实现,但是问题来了,比如我第一次从m2中拖动b1到m1,没问题,一切正常,然后再从m2中拖动b1到m1,也没问题,这时候我要给m1中的b1添加背景图片,一添加以后,两个b1都同时添加了背景图片,很奇怪,通过添加时间戳也一样,每次时间戳都会同时改变,我仔细探索发现,应该就是我之前不明白的clone属性导致的,确实我现在还不清楚这个该怎么用,但是功能必须得实现,看来得换种方法来实现了。
方法二:创建一个空的对象,拖动开始的时候通过start(event)对象拿到event.oldIndex,通过索引在数组对象doing中拿到响应的值,赋给空的对象,再结束的时候通过索引插进去this.doing.splice(event.oldIndex, 0, doingItem)

结束时清除缓存
OK,大功告成,希望此文对你有所帮助,有什么问题可以随时联系我!
Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题的更多相关文章
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vuejs2.0使用Sortable.js实现的拖拽功能( 转)
文章目录 简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- 实现在vue中element-ui的el-dialog弹框拖拽
参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 强大的拖拽组件:React DnD 的使用
强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读 · 读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...
随机推荐
- <转载> MySQL 架构 http://www.cnblogs.com/winner-0715/p/6863802.html
1.MySQL整体逻辑架构 我们先下图看看MySQL整体逻辑架构(MySQL’s Logical Architecture) 图1 第一层,即最上一层,所包含的服务并不是MySQL所独有的技术.它们都 ...
- windows 运行hadoop的WordCount报nativeio.NativeIO$Windows.createDirectoryWithMode0(Ljava/lang/String;I)
window eclipse连接hadoop集群,本地运行wordcount,报以下错误,尝试网络上的方法无果,如:换64JDK,添加hadoop_home,path,以及在hadoop\bin和c: ...
- flash builder的配色方案
写代码的时候看着代码颜色不是特别好,于是研究了一下flash builder的配色方案. flash builder由eclipse开发,采用和eclipse相同的配置方法,这个网站上有很多配色模板: ...
- 与前端对接 jsonp
主要是回调的写法,前端人员接受的数据格式 参数 (jsonString);
- Hbase数据读写流程
From: https://blog.csdn.net/wuxintdrh/article/details/69056188 写操作: Client写入,存入Memstore,Memstore满则Fl ...
- python的解构
今天学习python看到python的解构,觉得很有用就写下来,防止自己忘了 首先定义个列表 然后我们来解构 字典呢?字典需要两个*号才能解构 这样调用不明显 来个明显点的 上面错误是,你定义了一个形 ...
- 通过DOS命令批量重命名文件
以下为提供的两种方法:遍历当前目录下的所有文件名以.avi结尾的文件,然后权限规则进行修改(规则含义请自行查找资料).第一种方法有缺陷,更改完所有的文件名后,会多改一次.请斟酌使用.第二种方法解决了第 ...
- Hadoop分布式HA的安装部署
Hadoop分布式HA的安装部署 前言 单机版的Hadoop环境只有一个namenode,一般namenode出现问题,整个系统也就无法使用,所以高可用主要指的是namenode的高可用,即存在两个n ...
- 2-glance 部署
1. mysql 创建数据库和用户 create database glance; grant all privileges on glance.* to 'glance'@'localhost' i ...
- rem是如何实现自适应布局的
原文链接:http://caibaojian.com/web-app-rem.html 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算 ...