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.........完整代码请登录后点击上方下载按钮下载查看