vue2 使用 Sortable 库进行拖拽操作_vue sortable

最新推荐文章于 2025-06-24 06:14:30 发布

2401_84446712

最新推荐文章于 2025-06-24 06:14:30 发布

阅读量386

点赞数 7

CC 4.0 BY-SA版权

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/2401_84446712/article/details/138298798

程序员专栏收录该内容

160 篇文章

订阅专栏

这篇博客介绍了如何在Vue2项目中利用Sortable库进行拖拽操作。内容包括学习前端基础如HTML5、CSS、JavaScript，推荐了《javascript高级程序设计》作为前端工程师必读书籍，并提及了阅读相关性能书籍和设计模式的重要性。

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

        <el-col :span="12">
            <!-- 媒体区 -->
            <div class="bt-card-box">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>媒体资源区</span>
                    </div>
                    <div>
                        <el-row>
                            <draggable v-model="imageItems" chosen-class="chosen" force-fallback="true" :options="{group:{name: 'itxst',pull:'clone'}, sort: true}" animation="1000" @start="onStartImages" @end="onEndImages">
                                <transition-group>
                                    <el-col :span="4" v-for="(item,index) in imageItems" :key="index">
                                        <div style="padding: 5%">
                                            <el-card class="box-card">
                                                <el-image
                                                        style="width: 80px; height: 80px"
                                                        :src="item.value"
                                                        fit="cover"></el-image>
                                                <span style="text-align: center;display:block;">{{ item.alt }}</span>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </transition-group>
                            </draggable>
                        </el-row>
                    </div>
                </el-card>
            </div>

            <!-- 内容预览区 -->
            <div class="bt-card-box" style="padding-top: 2%">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>内容预览区</span>
                    </div>
                    <div v-for="(item,index) in contentItems" :key="index">
                        <h1 v-if="item.lable == 'H1'">{{item.value}}</h1>
                        <h2 v-if="item.lable == 'H2'">{{item.value}}</h2>
                        <h3 v-if="item.lable == 'H3'">{{item.value}}</h3>
                        <span v-if="item.lable == 'P'" v-html="item.value"></span>
                        <span v-if="item.lable == 'IMAGE'">
                            <img style="width: 50%" :src="item.value" alt="item.alt">
                        </span>
                        <div v-if="item.lable == 'VIDEO'">
                            <video width="50%" controls :autoplay="false">
                                <source :src="item.value" type="video/mp4">
                            </video>
                        </div>
                        <div v-if="item.lable == 'ARRAY'">
                            <li v-for="(item,index) in item.value">{{index+1}}、{{item}}</li>
                        </div>
                    </div>
                </el-card>
            </div>

        </el-col>
    </el-row>
    {{contentItems}}
    <div>{{drag?'拖拽中':'拖拽停止'}}</div>

</div>

* 查询分类数据
*/

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

html5