简介

在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码。

该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载。

实现效果

实现后的效果如图所示:

html主要代码

<draggable :list="list2" :move="getdata" @update="datadragEnd" :options="{animation: 300,handle:'.dargDiv'}">
<transition-group name="list-complete" >
<div v-for="element in list2" :key="element.it.name" class="list-complete-item">
<div class="styleclass dargDiv">{{element.id}}</div>
<div class="styleclass">{{element.it.name}}</div>
</div>
</transition-group>
</draggable>

css代码

 body{
font-family:'微软雅黑'
}
[v-cloak]{
display:none;
}
#example{
width:1000px;
margin:0 auto;
}
.list-complete-item {
transition: all 1s;
height:50px;
line-height: 50px;
background: #000;
color:#fff;
text-align: center;
font-size:24px;
margin-top:10px;
}
.styleclass{
width:100px;
float:left;
}
.list-complete-enter, .list-complete-leave-active {
opacity: 0;
height: 0px;
margin-top: 0px;
padding: 0px;
border: solid 0px;
}
.list-complete-sortable-chosen,.list-complete-sortable-ghost{
opacity: 0;
height: 0px;
margin-top: 0px;
padding: 0px;
border: solid 0px;
}
.dargDiv{
cursor:move;
background:red;
}
.wrods{
margin-top:50px;
}
p{
line-height:24px;
text-align:center;
}

js代码

require.config({
urlArgs: "ver=1.0_0", paths:{
"vue":'vue.min2',
"sortablejs":'Sortable',
"vuedraggable":'vuedraggable'
},
shim:{
'vue':{
exports:'vue'
}
}
}), require(['vue','vuedraggable'],function(Vue,draggable){
Vue.component('draggable', draggable);
new Vue({
el: '#example',
data: {
list2:[
{id:"id1",it:{name:'bbbb'}},
{id:"id2",it:{name:'2222'}},
{id:"id3",it:{name:'3333'}},
{id:"id4",it:{name:'4444'}}
]
},
methods:{
getdata: function(evt){
console.log(evt.draggedContext.element.id);
},
datadragEnd:function(evt){
console.log('拖动前的索引:'+evt.oldIndex);
console.log('拖动后的索引:'+evt.newIndex); } }
}) })

里面的可配置的很多细节请参考参考地址,这里不做详细介绍。

页面展示地址:https://hxlmqtily1314.github.io/Vue.Draggable-case/
github地址:https://github.com/hxlmqtily1314/Vue.Draggable-case

参考地址:https://github.com/SortableJS/Vue.Draggable

vuejs2.0使用Sortable.js实现的拖拽功能( 转)的更多相关文章

  1. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  2. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  3. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  4. jquery-ui.min.js的draggable()拖拽功能

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. sortable实现拖拽功能

    使用sortable这个强力插件就很容易实现拖拽功能,它是目前比较牛逼的拖拽插件,无需jquery,就可以全面支持pc和移动,参考以下github文档就有很详细的说明,也给了很多 demo,插件就用我 ...

  6. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  7. js制作可拖拽可点击的悬浮球

    兼容mouse事件和touch事件,支持IE9及其以上 效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE h ...

  8. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  9. (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

随机推荐

  1. rest-framework:频率控制

    一 频率简介: 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二 自定义频率类,自定义频率规则: 自定义的逻辑 #(1)取出访问者ip # (2)判断当前ip不在访问字典里,添加 ...

  2. Codeforces Round #688(Div 2) D. Checkpoints

    思路 第一步,先推导1,0,0,--,0,就是1后面跟了n-1个0的时候 所需要的期望步数 封闭式推导 \(f_n\)代表从n关开始直接通关需要的步数的期望 n为1的情况,即就只有一个1 \(f_1= ...

  3. PyQt(Python+Qt)学习随笔:QTableWidget的构造方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget有2个构造方法: QTableWidget(QWidget parent = ...

  4. Python正则表达式处理中的匹配对象是什么?

    老猿才开始学习正则表达式处理时,对于搜索返回的匹配对象这个名词不是很理解,因此在前阶段<第11.3节 Python正则表达式搜索支持函数search.match.fullmatch.findal ...

  5. OLLVM快速学习

    近来,ollvm在国内移动安全,尤其是安全加固上的使用越来越广泛,ollvm的混淆和反混淆也被视为比较高等的知识之一,让很多人感到无从下手,望尘莫及.如果你在google上搜索ollvm,你会发现第一 ...

  6. 网鼎杯2020 AreUSerialz

    0x00 前言 ...有一说一,赵总的BUUCTF上的这道题目并没有复现到精髓.其实感觉出题人的题目本身没有那么简单的,只不过非预期实在是太简单惹. 涉及知识点: 1.php中protected变量反 ...

  7. Python 装饰器(装饰器的简单使用)

    简单介绍了装饰器的一些基本内容,包含定义.本质.原则.如何实现. 1.装饰器的定义 定义:一种增加函数功能的简单方法,可以快速地给不同的函数或类插入相同的功能. 简单点就是:高阶函数+嵌套函数 -&g ...

  8. Python接口测试-使用requests模块发送GET请求

    本篇主要记录下使用python的requests模块发送GET请求的实现代码. 向服务器发送get请求:无参数时:r = requests.get(url)带params时:r = requests. ...

  9. springboot:定时任务

    在日常的开发过程中经常使用到定时任务,在springMVC的开发中,经常和quartz框架进行集成使用,但在springboot中没有这么做,而是使用了java的线程池来实现定时任务. 一.概述 在s ...

  10. 学习笔记:Prufer 编码

    Prufer 编码可以将无根树与序列之间进行转化. 一个 \(n\) 个点.区分编号的无向图 和 Prufer 序列一定是一一对应的,下面会给出映射方式. 借此可以证明 Cayley 定理: \(n\ ...