Drag 'n Drop with VueJS and SortableJS - something similar I saw when filling out Atlassian product evaluation feedback form.
Created
November 4, 2019 01:22
-
-
Save CodeMyUI/393d24e1dfdd9867406e115f1571b8b5 to your computer and use it in GitHub Desktop.
VueJS and Sortable JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app" class="container"> | |
<div class="text-center" style="padding: 20px;"> | |
<h3>Drag 'n Drop with VueJS and SortableJS</h3> | |
<span>Drag available option to the right.</span> | |
</div> | |
<div class="row" style="margin:5px; border-radius: 2px; padding: 5px; background-color: #F4F4F4;"> | |
<li class="selected card" v-for="option in selected" v-colorswatch> | |
{{ option }} | |
</li> | |
</div> | |
<div class="row"> | |
<div class="col"> | |
<ul class="options list-group" v-sortable="{onAdd: pullItem, group: {name: 'options', put: ['answers']}}"> | |
<p>Available Options</p> | |
<li v-for="option in options" :key="option.id" class="list-group-item"> | |
{{ option.title }} | |
</li> | |
</ul> | |
</div> | |
<div class="col"> | |
<ul id="list" class="answers list-group" v-sortable="{onAdd: pushItem, group: {name: 'answers', put: ['options']}}"> | |
<p>Selected Options</p> | |
<li v-for="option in answers" :key="option.id" class="list-group-item"> | |
{{ option }} | |
</li> | |
</ul> | |
</div> | |
</div> <!-- End of Row --> | |
</div> <!-- End of Container --> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vue.directive( 'sortable', { | |
inserted: function(el, binding) { | |
var sortable = new Sortable(el, binding.value || {}); | |
}, | |
}); | |
Vue.directive('colorswatch', function(el, binding) { | |
let colors = [ | |
{ id: 1, name: "#F44336" }, | |
{ id: 2, name: "#E91E63" }, | |
{ id: 3, name: "#9C27B0" }, | |
{ id: 4, name: "#673AB7" }, | |
{ id: 5, name: "#2196F3" }, | |
{ id: 6, name: "#3F51B5" }, | |
{ id: 7, name: "#ff5722" }, | |
{ id: 8, name: "#009688" }, | |
{ id: 9, name: "#4caf50" }, | |
{ id: 10, name: "#ff9800" }, | |
{ id: 11, name: "#607d8b" }, | |
{ id: 12, name: "#00bcd4" }, | |
{ id: 13, name: "#03a9f4" }, | |
]; | |
let randomId = _.random(1, 13); | |
let color = _.find(colors, p=>p.id == randomId); | |
return el.style.backgroundColor = color.name; | |
}) | |
new Vue({ | |
el: '#app', | |
data: { | |
options: [ | |
{id: 1, title: "Sales Cloud"}, | |
{id: 2, title: "Service Cloud"}, | |
{id: 3, title: "Community Cloud"}, | |
{id: 4, title: "Financial Cloud"}, | |
{id: 5, title: "Einstein AI"}, | |
{id: 6, title: "Wave Analytics"}, | |
{id: 7, title: "Health Cloud"}, | |
], | |
answers:[], | |
selected: {}, | |
}, | |
watch: { | |
selected: function(newValue) { | |
console.log('newValue'); | |
console.log(newValue); | |
} | |
}, | |
methods: { | |
pushItem (evt) { | |
let obj = _.find(this.options, function(item, key) { | |
if(item.title == evt.item.textContent.trim() ) | |
return item | |
}) | |
// this.selected[obj.id] = obj.title; | |
Vue.set(this.selected, obj.id, obj.title) | |
//console.log(this.selected); | |
}, // end of pushItem | |
pullItem (evt) { | |
let obj = _.find(this.options, function(item, key) { | |
if(item.title == evt.item.textContent.trim() ) | |
return item | |
}) | |
// delete this.selected[obj.id]; // working | |
// Vue.remove(this.selected, obj.id, obj.title) | |
Vue.delete(this.selected, obj.id) | |
// console.log(this.selected); | |
}, // end of pullItem | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Roboto Slab', serif; | |
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); | |
height: 100vh; | |
} | |
ul { | |
padding: 10px !important; | |
border-radius: 5px; | |
} | |
p{ | |
color: #F4F4F4; | |
} | |
.options { | |
background-color: #e6e9f0; | |
background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%); | |
} | |
.answers { | |
background-color: #c1dfc4; | |
background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%); | |
} | |
li { | |
cursor: move; | |
opacity: 0.9; | |
} | |
.selected { | |
list-style:none; | |
color: #FFF; | |
margin: 5px; | |
padding: 5px; | |
font-size: 13px; | |
border-radius: 2px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment