vue3+vuedraggable实现工作台卡片拖拽效果代码

代码语言:html

所属分类:拖放

代码描述:vue3+vuedraggable实现工作台卡片拖拽效果代码

代码标签: vue3 vue draggable 工作台 卡片 拖拽

下面为部分代码预览,完整代码请点击下载或在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>
 
<div id="app">
   
<div class="demo">
     
<div class="group">
       
<draggable :list="modules.group1" ghost-class="ghost" handle=".move" filter=".forbid"
          :
force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" group="group1"
          :
fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50"
          :
move="onMove">
         
<template #item="{ element }">
           
<div :class="element.disabledMove ? 'forbid item' : 'item'">
             
<label class="move">{{ element.name }}</label>
             
<p v-html="element.name=='消息'?'消息不允许拖拽和停靠':'内容....'"></p>
           
</div>
         
</template>
       
</draggable>
     
</div>
     
<div class="group">
        <draggable :list="modules.group2" ghost-class="ghost" handle=".move" filter=".forbid"
          :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" group="group1"
          :fallback-class="true" :fallback-on-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0