vue-drag-n-drop
Version:
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
556 lines (511 loc) • 25.6 kB
JavaScript
var VueDragNDrop = (function (exports, vueSmoothDnd, _) {
'use strict';
_ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
/* istanbul ignore file */
var RequiredProps = {
/**
* Holds the main data list to distribute.
*/
originalData: {
type: Array,
required: true,
},
/**
* Holds the drop buckets.
*/
dropzones: {
type: Array,
required: true,
},
/**
* Title for the original list.
*/
originalTitle: {
type: String,
required: false,
default: "Original List",
},
/**
* Title for the drop buckets.
*/
dropzonesTitle: {
type: String,
required: false,
default: "Distribution data",
},
/**
* An option to have an in-place changes. So, the props passed into the component itself would change.
* If true, all the drags and drops done in this component is reflected in parent's objects.
* If false, you need to have save button to get all the changes to the parent component.
*/
inPlace: {
type: Boolean,
required: false,
default: true,
},
/**
* Enables save button
*/
enableSave: {
type: Boolean,
required: false,
default: true,
},
/**
* Enables cancel button
*/
enableCancel: {
type: Boolean,
required: false,
default: true,
},
};
//
var script = {
name: "VueDragNDrop",
components: { Container: vueSmoothDnd.Container, Draggable: vueSmoothDnd.Draggable },
props: RequiredProps,
data: function () {
return {
items:[],
dropGroups: [],
}
},
created: function created() {
if (this.inPlace) {
this.items = this.originalData;
this.dropGroups = this.dropzones;
}
else {
this.items = _.cloneDeep(this.originalData);
this.dropGroups = _.cloneDeep(this.dropzones);
}
},
methods: {
/**
* Even that runs when an item is dropped in the original list bucket.
* @param {Object} dropResult Holds the value of what is dropped.
* @public
*/
onDrop: function onDrop(dropResult){
this.items = this.applyDrag(this.items, dropResult);
this.$emit('dropInOriginalBucket', dropResult);
},
/**
* Runs when the card is dropped in any of the drop buckets. Handles the dropping into new bucket and
* removing from original bucket.
* @param {String} columnId Holds the ID of the original bucket tot get the card.
* @param {Object} dropResult Holds the drop result.
*/
onCardDrop: function onCardDrop(columnId, dropResult) {
if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
if(dropResult.removedIndex !== null){
var found = this.dropGroups.filter(function (p) { return p.name === columnId; })[0];
found.children.splice(dropResult.removedIndex, 1);
}
if (dropResult.addedIndex !== null){
var found$1 = this.dropGroups.filter(function (p) { return p.name === columnId; })[0];
found$1.children.splice(dropResult.addedIndex, 0, dropResult.payload);
}
}
this.$emit('dropInDestinationBucket', columnId, dropResult);
},
/**
* Gets the card payload
* @param {String} Holds the ID.
*/
getCardPayload: function getCardPayload(id){
var that = this;
return function(index) {
var found = that.dropGroups.filter(function (p) { return p.name === id; })[0].children[
index
];
return found;
}
},
/**
* Same as card payload but this is only implemented in original list.
* @public
*/
getOriginalCardPayload: function getOriginalCardPayload(){
var that = this;
return function(index){
return that.items[index];
}
},
/**
* Applies the dragging result. It removes the item from original bucket and keeps it in new new list.
* @param {Array} arr Holds the array.
* @param {Object} dragResult Holds the drag information.
* @returns the new corrected list.
* @public
*/
applyDrag: function applyDrag(arr, dragResult) {
var removedIndex = dragResult.removedIndex;
var addedIndex = dragResult.addedIndex;
var payload = dragResult.payload;
if (removedIndex === null && addedIndex === null) { return arr }
var result = [].concat( arr );
var itemToAdd = payload;
if (removedIndex !== null) {
itemToAdd = result.splice(removedIndex, 1)[0];
}
if (addedIndex !== null) {
result.splice(addedIndex, 0, itemToAdd);
}
return result;
},
/**
* Runs when save button is clicked. It first validates if all the items from the original list is empty.
* @public
*/
saveClicked: function saveClicked() {
/**
* @event save Emits when save is clicked so that the parent component can appropriately handle it.
* @type {Object}
*/
this.$emit('save', {
dropzones: this.dropGroups,
originalBucket: this.items
});
},
cancelClicked: function cancelClicked() {
/**
* @event cancel Handles the cancellation.
*/
this.$emit("cancel");
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) { return addStyle(id, style); };
}
var HEAD;
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
{ style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index])
{ style.element.removeChild(nodes[index]); }
if (nodes.length)
{ style.element.insertBefore(textNode, nodes[index]); }
else
{ style.element.appendChild(textNode); }
}
}
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "vue-drag-n-drop" }, [
_c("h2", { staticClass: "dd-title" }, [
_vm._v("\n " + _vm._s(_vm.originalTitle) + "\n ")
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "dd-first-group" },
[
_c(
"Container",
{
attrs: {
"group-name": "col",
orientation: "horizontal",
"get-child-payload": _vm.getOriginalCardPayload(),
"drag-class": "dd-card-ghost",
"drop-class": "dd-card-ghost-drop"
},
on: { drop: _vm.onDrop }
},
_vm._l(_vm.items, function(item, iind) {
return _c(
"Draggable",
{ key: iind },
[
_vm._t(
"dd-card",
[
_c("div", { staticClass: "card" }, [
_c("p", [
_vm._v(
"\n " + _vm._s(item) + "\n "
)
])
])
],
{ cardData: item }
)
],
2
)
}),
1
)
],
1
),
_vm._v(" "),
_c("hr"),
_vm._v(" "),
_c("h2", { staticClass: "dd-title" }, [
_vm._v("\n " + _vm._s(_vm.dropzonesTitle) + "\n ")
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "dd-result-group" },
_vm._l(_vm.dropGroups, function(item, ind) {
return _c(
"div",
{ key: ind, staticClass: "dd-drop-container" },
[
_vm._v("\n " + _vm._s(item.name) + "\n "),
_c(
"Container",
{
attrs: {
"group-name": "col",
"get-child-payload": _vm.getCardPayload(item.name),
"drag-class": "dd-card-ghost",
"drop-class": "dd-card-ghost-drop"
},
on: {
drop: function(e) {
return _vm.onCardDrop(item.name, e)
}
}
},
_vm._l(item.children, function(card, cid) {
return _c(
"Draggable",
{ key: cid },
[
_vm._t(
"dd-card",
[
_c("div", { staticClass: "card" }, [
_c("p", [
_vm._v(
"\n " +
_vm._s(card) +
"\n "
)
])
])
],
{ cardData: card }
)
],
2
)
}),
1
)
],
1
)
}),
0
),
_vm._v(" "),
_vm.enableSave || _vm.enableCancel
? _c("div", { staticClass: "dd-drop-actions" }, [
_vm.enableSave
? _c(
"button",
{
staticClass: "button dd-save",
on: {
click: function($event) {
return _vm.saveClicked()
}
}
},
[_vm._v("\n Save\n ")]
)
: _vm._e(),
_vm._v(" "),
_vm.enableCancel
? _c(
"button",
{
staticClass: "button dd-cancel",
on: {
click: function($event) {
return _vm.cancelClicked()
}
}
},
[_vm._v("\n Cancel\n ")]
)
: _vm._e()
])
: _vm._e()
])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-30e93db3_0", { source: "\n.dd-drop-container{\n display: inline-block;\n vertical-align: top;\n width: 210px;\n padding: 10px;\n margin: 5px;\n min-height: 5em;\n margin-right: 10px;\n white-space: normal;\n background-color: #f3f3f3;\n box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);\n}\n.card{\n margin: 5px;\n width: 200px;\n background-color: white;\n box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);\n padding: 10px;\n}\n.dd-result-group {\n overflow: auto;\n white-space: nowrap;\n}\n.dd-first-group {\n overflow-y: auto;\n max-height: 200px;\n}\n.dd-first-group > .smooth-dnd-container {\n min-height: 100px;\n white-space: unset;\n}\n.dd-drop-actions{\n text-align: center;\n margin: 10px 0px;\n}\n.dd-drop-actions button\n{\n margin-right: 10px;\n padding: 10px;\n background-color: white;\n border-radius: 5px;\n}\n.dd-save{\n background: #5cdb95 !important;\n border: none;\n cursor: pointer;\n}\n.dd-cancel {\n border: none;\n cursor: pointer;\n}\n\n", map: {"version":3,"sources":["/Users/sujilmaharjan/Desktop/projects/vue-drag-and-drop-kanban/src/vue-drag-n-drop.vue"],"names":[],"mappings":";AA+MA;EACA,qBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,yBAAA;EACA,kEAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kEAAA;EACA,aAAA;AACA;AAEA;EACA,cAAA;EACA,mBAAA;AACA;AAEA;EACA,gBAAA;EACA,iBAAA;AACA;AAEA;EACA,iBAAA;EACA,kBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;AACA;AAEA;;EAEA,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;AACA;AAEA;EACA,8BAAA;EACA,YAAA;EACA,eAAA;AACA;AAEA;EACA,YAAA;EACA,eAAA;AACA","file":"vue-drag-n-drop.vue","sourcesContent":["<template>\n <div class=\"vue-drag-n-drop\">\n <h2 class=\"dd-title\">\n {{originalTitle}}\n </h2>\n <div class=\"dd-first-group\"> \n <Container \n @drop=\"onDrop\" \n group-name=\"col\"\n :orientation=\"'horizontal'\"\n :get-child-payload=\"getOriginalCardPayload()\"\n drag-class=\"dd-card-ghost\"\n drop-class=\"dd-card-ghost-drop\">\n <Draggable v-for=\"(item, iind) in items\" :key=\"iind\">\n <slot name=\"dd-card\" v-bind:cardData=\"item\">\n <div class=\"card\">\n <p>\n {{item}}\n </p>\n </div>\n </slot>\n </Draggable>\n </Container>\n </div>\n <hr>\n <h2 class=\"dd-title\">\n {{dropzonesTitle}}\n </h2>\n <div class=\"dd-result-group\">\n <div \n v-for=\"(item,ind) in dropGroups\"\n v-bind:key=\"ind\"\n class=\"dd-drop-container\">\n {{item.name}}\n <Container \n group-name=\"col\"\n @drop=\"(e) => onCardDrop(item.name, e)\"\n :get-child-payload=\"getCardPayload(item.name)\"\n drag-class=\"dd-card-ghost\"\n drop-class=\"dd-card-ghost-drop\"\n >\n <Draggable v-for=\"(card, cid) in item.children\" :key=\"cid\">\n <slot name=\"dd-card\" v-bind:cardData=\"card\">\n <div class=\"card\">\n <p>\n {{card}}\n </p>\n </div>\n </slot>\n </Draggable>\n </Container>\n\n </div>\n </div>\n\n <div class=\"dd-drop-actions\" v-if=\"enableSave || enableCancel\">\n <button class=\"button dd-save\" v-if=\"enableSave\" @click=\"saveClicked()\">\n Save\n </button>\n <button class=\"button dd-cancel\" v-if=\"enableCancel\" @click=\"cancelClicked()\">\n Cancel\n </button>\n </div>\n\n </div>\n</template>\n\n<script>\nimport { Container, Draggable } from \"vue-smooth-dnd\";\nimport _ from 'lodash';\nimport RequiredProps from './drag-n-drop-props.js';\n\nexport default {\n name: \"VueDragNDrop\",\n components: { Container, Draggable },\n props: RequiredProps,\n\n data: function () {\n return {\n items:[],\n dropGroups: [],\n }\n },\n\n created() {\n if (this.inPlace) {\n this.items = this.originalData;\n this.dropGroups = this.dropzones;\n }\n else {\n this.items = _.cloneDeep(this.originalData);\n this.dropGroups = _.cloneDeep(this.dropzones);\n }\n },\n\n methods: {\n /** \n * Even that runs when an item is dropped in the original list bucket.\n * @param {Object} dropResult Holds the value of what is dropped.\n * @public\n */\n onDrop(dropResult){\n this.items = this.applyDrag(this.items, dropResult);\n this.$emit('dropInOriginalBucket', dropResult);\n },\n\n /** \n * Runs when the card is dropped in any of the drop buckets. Handles the dropping into new bucket and \n * removing from original bucket.\n * @param {String} columnId Holds the ID of the original bucket tot get the card.\n * @param {Object} dropResult Holds the drop result.\n */\n onCardDrop(columnId, dropResult) {\n if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {\n\n if(dropResult.removedIndex !== null){\n let found = this.dropGroups.filter(p => p.name === columnId)[0];\n found.children.splice(dropResult.removedIndex, 1);\n }\n\n if (dropResult.addedIndex !== null){\n let found = this.dropGroups.filter(p => p.name === columnId)[0];\n found.children.splice(dropResult.addedIndex, 0, dropResult.payload);\n }\n }\n\n this.$emit('dropInDestinationBucket', columnId, dropResult);\n },\n\n /** \n * Gets the card payload\n * @param {String} Holds the ID.\n */\n getCardPayload(id){\n let that = this;\n return function(index) {\n let found = that.dropGroups.filter(p => p.name === id)[0].children[\n index\n ];\n\n return found;\n }\n },\n\n /** \n * Same as card payload but this is only implemented in original list.\n * @public\n */\n getOriginalCardPayload(){\n let that = this;\n return function(index){\n return that.items[index];\n }\n },\n\n /** \n * Applies the dragging result. It removes the item from original bucket and keeps it in new new list.\n * @param {Array} arr Holds the array.\n * @param {Object} dragResult Holds the drag information.\n * @returns the new corrected list.\n * @public\n */\n applyDrag(arr, dragResult) {\n const { removedIndex, addedIndex, payload } = dragResult\n if (removedIndex === null && addedIndex === null) return arr\n\n const result = [...arr]\n let itemToAdd = payload\n\n if (removedIndex !== null) {\n itemToAdd = result.splice(removedIndex, 1)[0]\n }\n\n if (addedIndex !== null) {\n result.splice(addedIndex, 0, itemToAdd)\n }\n\n return result;\n },\n\n /** \n * Runs when save button is clicked. It first validates if all the items from the original list is empty.\n * @public\n */\n saveClicked() {\n /** \n * @event save Emits when save is clicked so that the parent component can appropriately handle it.\n * @type {Object} \n */\n this.$emit('save', {\n dropzones: this.dropGroups,\n originalBucket: this.items\n });\n },\n\n cancelClicked() {\n /** \n * @event cancel Handles the cancellation.\n */\n this.$emit(\"cancel\");\n }\n }\n}\n</script>\n\n<style>\n\n.dd-drop-container{\n display: inline-block;\n vertical-align: top;\n width: 210px;\n padding: 10px;\n margin: 5px;\n min-height: 5em;\n margin-right: 10px;\n white-space: normal;\n background-color: #f3f3f3;\n box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);\n}\n\n.card{\n margin: 5px;\n width: 200px;\n background-color: white;\n box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);\n padding: 10px;\n}\n\n.dd-result-group {\n overflow: auto;\n white-space: nowrap;\n}\n\n.dd-first-group {\n overflow-y: auto;\n max-height: 200px;\n}\n\n.dd-first-group > .smooth-dnd-container {\n min-height: 100px;\n white-space: unset;\n}\n\n.dd-drop-actions{\n text-align: center;\n margin: 10px 0px;\n}\n\n.dd-drop-actions button\n{\n margin-right: 10px;\n padding: 10px;\n background-color: white;\n border-radius: 5px;\n}\n\n.dd-save{\n background: #5cdb95 !important;\n border: none;\n cursor: pointer;\n}\n\n.dd-cancel {\n border: none;\n cursor: pointer;\n}\n\n</style>\n"]}, media: undefined });
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
createInjector,
undefined,
undefined
);
/* istanbul ignore file */
// Declare install function executed by Vue.use()
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component('vue-drag-n-drop', __vue_component__);
}
// Create module definition for Vue.use()
var plugin = {
install: install,
};
// Auto-install when vue is found (eg. in browser via <script> tag)
var GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
exports.default = __vue_component__;
exports.install = install;
return exports;
}({}, VueSmoothDnD, _));