正文 

当前位置： 首页 > 知识 >

带有 Vue 2.0 的 Sortable.js 排序不正确

     2023-02-16     101

关键词：

【中文标题】带有 Vue 2.0 的 Sortable.js 排序不正确【英文标题】：Sortable.js with Vue 2.0 sorts incorrectly 【发布时间】：2017-02-13 14:02:13 【问题描述】：

我正在使用 Sortable.js 和 Vue.js。目标是对项目进行排序并保持数据更新。

它在 Vue 1.x 上运行良好，但在更新到 2.0 后排序变得不正确。数组仍然正确更新，但 DOM 中的项目位于错误的位置。

new Vue(
  el: '#app',
  template: '#sort',
  data: function() 
    return 
      items: [
        "http://placehold.it/200X300?text=image1",
        "http://placehold.it/200X300?text=image2",
        "http://placehold.it/200X300?text=image3",
        "http://placehold.it/200X300?text=image4"
      ],  
    
  ,
  mounted: function() 
    this.$nextTick(function () 
      Sortable.create(document.getElementById('sortable'), 
        animation: 200,
        onUpdate: this.reorder.bind(this),
      );
    )
  ,
  methods: 
    reorder: function(event) 
        var oldIndex = event.oldIndex,
            newIndex = event.newIndex;
        this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);

     
   
);

jsFiddle https://jsfiddle.net/4bvtofdd/4/

有人可以帮我吗？

【问题讨论】：

恐怕由于虚拟 dom，sortable 现在与 vue 2.0 不兼容。修改 DOM 时，两者似乎都不兼容。我看到的唯一可能的“补丁”是使用 2 个数组，1 个用于绘画，另一个用于跟踪更改 哦。猜猜我必须使用另一个插件:( 【参考方案1】：

我今天也遇到了类似的问题。

添加 :key 值以确保在 Sortable 更改项目顺序后 Vue 以正确的顺序重新呈现元素

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

https://vuejs.org/v2/guide/list.html#key

【讨论】：

【参考方案2】：

碰巧的是，Sortable 会跟踪 sortable.toArray() 中的顺序，因此很容易进行计算，以按排序顺序为您提供项目，而原始项目列表保持不变。

new Vue(
  el: '#app',
  template: '#sort',
  data: 
    items: [
      "http://placehold.it/200X300?text=image1",
      "http://placehold.it/200X300?text=image2",
      "http://placehold.it/200X300?text=image3",
      "http://placehold.it/200X300?text=image4"
    ],
    order: null
  ,
  computed: 
    sortedItems: function() 
      if (!this.order) 
      	return this.items;
      
      return this.order.map((i) => this.items[i]);
    
  ,
  mounted: function() 
    this.$nextTick(() => 
      const sortable = Sortable.create(document.getElementById('sortable'), 
        animation: 200,
        onUpdate: () =>  this.order = sortable.toArray(); 
      );
    )
  
);
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//unpkg.com/vue@2.0.1/dist/vue.js"></script>
<div id='app'></div>
<template id="sort">
  <div class="container">
    <div class="row sort-wrap" id="sortable">
      <div class="col-xs-6 col-md-3 thumbnail" v-for="(item, index) in items" :data-id="index">
        <img v-bind:src="item"  class="img-responsive">
      </div>
    </div>
    <div v-for="item in sortedItems">
    item
    </div>
  </div>
</template>

【讨论】：

【参考方案3】：

确保您没有使用道具，否则您将无法排序。如果您正在使用道具，请将道具数据分配给数据属性并改用数据属性。

【讨论】：

vue中使用sortable.js实现拖动排序

参考技术A一、安装依赖npminstallvuedraggable--savenpminsallsortablejs--save二、引入依赖importdraggablefrom'vuedraggable'importSortablefrom'sortablejs'三、JS函数拖动改变顺序（数组）：drag()      letnewArr=this.checkMaterial.j... 查看详情

vue中使用sortable.js拖动表格

参考技术Asortable.js官网拖放排序插件Sortable.js中文介绍1.安装npm或yarn安装2.使用效果：3.小结事件：onChoose：function列表单元被选中的回调函数onStart：function列表单元拖动开始的回调函数onEnd：function列表单元拖放结束后的回调函数o... 查看详情

sortable.js在vue中实现拖拽(代码片段)

1npminstallsortablejs--save2xxx.vue<template><div><el-bgwhite><el-row><el-form:model="form"ref="form"label-width="130px"size="small"><el-rowid="topicMove"><el-ro 查看详情

如何在 Laravel 5.3 中使用带有 Vue.js 2.0 的组件中使用外部 html 模板

】如何在Laravel5.3中使用带有Vue.js2.0的组件中使用外部html模板【英文标题】：HowtouseexternalhtmltemplatesinComponentswithVue.js2.0inLaravel5.3【发布时间】：2017-04-2804:18:51【问题描述】：我正在使用默认的Laravel5.3设置-全新安装，带有Vue.js2.0... 查看详情

vue+element拖动排序功能(代码片段)

...是没办法,实现吧!这功能肯定不会手撸了,直接上插件使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.　　教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741　　教程地址:https://blo 查看详情

sortable.js实现两个不同的表格之间表格行的拖曳的功能

...和group2中的各个参数与方法其他的都不多说了（可以去看sortable.js的文档，非常的清晰）我只说一下两个group的参数，首先，name属性值必须设置一致（组名）；然后是pull，我这边采用clone的方式去拖曳，put：是可放置，group2是左... 查看详情

用 mobx 反应 Sortable JS

】用mobx反应SortableJS【英文标题】：ReactSortableJSwithmobx【发布时间】：2020-12-0700:10:10【问题描述】：我正在构建一个功能组件，该组件应该使用react-sortablejs来自mobx存储的计算数组（层数组）呈现可排序组件（ReactSortable）。组件... 查看详情

带有 JSON 主体的 POST 请求 AFNetworking 2.0

】带有JSON主体的POST请求AFNetworking2.0【英文标题】：POSTrequestwithJSONbodyAFNetworking2.0【发布时间】：2015-02-0700:17:32【问题描述】：是否可以使用AFNetworking~>2.0发送带有JSON正文的POST请求？我尝试过使用：manager.requestSerializer=[AFJSONRequ... 查看详情

尝试删除最后一个元素时，带有子项的 SwiftUI (2.0) 列表崩溃

】尝试删除最后一个元素时，带有子项的SwiftUI(2.0)列表崩溃【英文标题】：SwiftUI(2.0)listwithchildrencrasheswhentryingtodeletethelastelement【发布时间】：2020-08-0807:20:52【问题描述】：我有以下代码用于带有孩子的SwiftUI列表，改编自另一个*... 查看详情

sortable.js拖拽导致移动端不能点击问题

参考技术A业务场景：经过百度搜索解决方案1：给点击的事件添加阻止冒泡方法  event.stopPropagation();2：给拖拽盒子里的子元素添加 pointer-events: bounding-box属性 查看详情

vue项目中vuedraggable的使用

参考技术A后面可能会写一个可视化装修的项目，拖动这种功能是免不了的，于是使用了一下这个插件vuedraggable基于并提供Sortable.js的所有功能首先安装npmivuedraggable-Dtemplate部分script引入 查看详情

带有 Yahoo Asp.net 核心 2.0 的 OAuth

】带有YahooAsp.net核心2.0的OAuth【英文标题】：OAuthwithYahooAsp.netcore2.0【发布时间】：2018-10-0514:20:16【问题描述】：我正在使用带有openiddict的asp.net核心后端。我已经成功地设置了很多外部提供商，完全没有问题，我只是设置了一个... 查看详情

带有 Django 2.0 的 Django REST 框架 URL

】带有Django2.0的DjangoREST框架URL【英文标题】：DjangoRESTFrameworkURLswithDjango2.0【发布时间】：2018-08-0621:34:14【问题描述】：我正在尝试使用Django2.0项目设置DjangoRESTFramework，这意味着url(r\'^something/\'...已替换为path(something/...。我正在... 查看详情

RESTKit 2.0：带有文本/html 的 AFHTTPClient

】RESTKit2.0：带有文本/html的AFHTTPClient【英文标题】：RESTKit2.0:AFHTTPClientwithtext/html【发布时间】：2014-04-0123:54:43【问题描述】：我正在使用RESTKitv0.20.3。由于我不期待responseObject，我决定使用AFHTTPClient进行POST。我有以下代码：AFHTTPC... 查看详情

记录一下vue3.0与2.0简单使用上的区别

参考技术A1、创建实例方式不同：2.0使用构造函数newVue的方式，将选项对象通过参数传入；3.0使用Vue.createApp()静态方法创建。参数依然是选项多先发。2.0使用符。2、定义指令、组件等方法的不同：2.0定义指令和组件等是通过Vue的... 查看详情

带有自己的验证器消息的 JSF 2.0 validateRegex

】带有自己的验证器消息的JSF2.0validateRegex【英文标题】：JSF2.0validateRegexwithownvalidatormessage【发布时间】：2011-11-1622:15:09【问题描述】：我有一个类似这样的代码：<h:inputTextid="email"value="#managePasswordBean.forgotPasswordEmail"validatorMessa... 查看详情

element-uitable表格组件实现可拖拽效果（行列）(代码片段)

首先，需要用到第三方库，sortable.js，因为我的项目是vue，所以在package引用的是vuedraggable，而vuedraggable是包含sortable的。npminstallsortable.js--save//或者npmi-Svuedraggable//vuedraggable依赖Sortable.js& 查看详情

带有 xcode 8 的 Alamofire 2.0

】带有xcode8的Alamofire2.0【英文标题】：Alamofire2.0withxcode8【发布时间】：2016-10-1002:52:36【问题描述】：我刚刚升级到xcode8。Alamofire2.0版可以在xcode8上运行吗？我尝试将“使用旧版Swift语言版本”设置为“是”但未能构建。我必须使... 查看详情