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">
      
    </pipeline>
    <pipeline title="In Progress" :items="inProgressItems" @itemmoved="onItemMoved"></pipeline>
    
    <pipeline title="Closed" :items="closedItems" @itemmoved="onItemMoved"></pipeline>
  </div>
</script>

  
<div id="app">
  <my-message message="Hey there"></my-message>
  <pipelines></pipelines>
  
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
      <script >
Vue.component('my-message', {
  template: '\
   <div class="container">\
      {{ message}}\
   </div>',
  props: ['message'] });


Vue.component('pipeline', {
  template: '#pipeli.........完整代码请登录后点击上方下载按钮下载查看