vue3+vuedraggable实现拖拽排序效果代码-html代码-BFW代码库

vue3+vuedraggable实现拖拽排序效果代码

代码语言：html

所属分类：拖放

代码描述：vue3+vuedraggable实现拖拽排序效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable vue3例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Sortable-1-8-4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuedraggable.umd.vue3.js"></script>
</head>
<body style="padding:10px;">
    <div id="app" class="demo">
        <draggable :list="list" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
            @start="onStart" @end="onEnd">
            <template #item="{ element }">
                <div class="item">
                    {{ element.name }}
                </div>
            </template>
        </draggable>
    </div>
    <script>
        const app = {
            data() {
                return {
                    //需要拖拽的数据
                    list: [
                        { name: "www.bfw.wiki", id: 0 },
 .........完整代码请登录后点击上方下载按钮下载查看