vue使用vuedraggable实现拖拽排序布局

吴老弟i

于 2020-07-21 18:39:48 发布

阅读量2.2k

点赞数

分类专栏： vue的插件库的使用

本文链接：https://blog.youkuaiyun.com/wuxiaoqing_818/article/details/107495691

版权

本文介绍了如何在Vue项目中利用vuedraggable库实现元素的拖拽排序功能，通过引入和使用该组件，可以轻松创建动态布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import draggable from “vuedraggable”;

<!-- 拖拽 -->
      <div class="content">
        <draggable v-model="shopList" @update="datadragEnd" :options="{animation:500}">
          <transition-group class="clearfix">
            <div v-for="item in shopList" :key="item.id" class="drag-item clearfix">
              <img src="../../../../../assets/images/user-img.png" alt />
              <ul>
                <li>{
  {item.name}}</li>
                <li>ID：{
  {item.id}}</li>
                <li>原价{
  {item.oldPrice}}</li>
                <li>￥：{
  {item.price}}</li>
              </ul>
            </div>
          </transition-group>
        </draggable>
      </div>

//拖拽