vue多组件实现任务管理拖拽效果代码-html代码-BFW代码库

vue多组件实现任务管理拖拽效果代码

代码语言：html

所属分类：拖放

代码描述：vue多组件实现任务管理拖拽效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bulma-0.3.1.css">


  
  
</head>

<body translate="no">
  <script type="text/x-template" id="pipeline-template">
        
        <div class="column">
        <div class="panel">
        <p class="panel-heading">
                        {{ title }}
       </p>
       <div class="panel-block" @dragover="onDragOver" @drop="onDrop">
       <div class="columns">
                        <div class="column">
                                <my-draggable v-for="item in items" :key="item._id" :item="item"></my-draggable>
                        </div>
                </div>
                        
                </div>
        </div>
  </div>
</script>

<script type="text/x-template" id="my-draggable-template">
        <div class="card"  draggable="true" @dragstart="onDragStart">
        <div class="card-header">
        <p class="card-header-title">{{ item.title }}</p>
      <div class="card-content">
        <div class="content">{{ item.content }}</div>
      </div>
        </div>
  </div>
</script>

<script type="text/x-template" id="pipelines-template">
        <div class="columns" >
    <pipeline title="New" :items="newItems" @itemmoved="onItemMoved">
      
    </pipel.........完整代码请登录后点击上方下载按钮下载查看