vue-mover
Version:
A simple list picker vue-component, with drag and drop and sortable items.
58 lines (51 loc) • 2.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue-Mover Sample</title>
<link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="scripts/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vue-mover.css">
<style>
[v-cloak] {display: none}
</style>
<style>
/* override panel height for second panel */
#Mover2 .mover-panel {
height: 600px ;
}
#Mover2 {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="Body" style="padding: 10px;">
<h1>{{pageTitle}}</h1>
<div class="container" style="margin-top: 80px">
<mover :left-items="unselectedItems" :right-items="selectedItems"
title-left="Available Items" title-right="Selected Items"
moved-item-location="bottom"
v-cloak></mover>
<mover
:left-items="unselectedItems2"
:right-items="selectedItems2"
:font-awesome="false"
title-left="More Available Items"
title-right="More Selected Items" v-cloak
target-id="Mover2"></mover>
<hr />
<button class="btn btn-primary" @click="saveItems()" >Show Selected Items</button>
<h3>Bound and updated model values (first mover)</h3>
<pre>{{unselectedItems}}</pre>
<pre>{{selectedItems}}</pre>
</div>
</div>
<script src="scripts/vue.js"></script>
<script src="scripts/Sortable.min.js"></script>
<script src="vue-mover.js"></script>
<script src="moverComponentSample.js"></script>
</body>
</html>