Vue Draggable Added

This commit is contained in:
Devansh 2022-02-01 18:18:55 +05:30
parent 37ab87e54c
commit 836f3679b1
6 changed files with 66 additions and 47 deletions

View File

@ -10,11 +10,13 @@
<product-image></product-image>
<span class="control-error" v-if="{!! $errors->has('images.*') !!}">
@php $count = 1; @endphp
@php
$count = 1;
@endphp
@foreach ($errors->get('images.*') as $key => $message)
@php
echo str_replace($key, 'Image'.$count, $message[0]);
echo str_replace($key, 'Image' . $count, $message[0]);
$count++;
@endphp
@ -34,13 +36,15 @@
<script type="text/x-template" id="product-image-template">
<div>
<div class="image-wrapper">
<product-image-item
v-for='(image, index) in items'
:key='image.id'
:image="image"
@onRemoveImage="removeImage($event)"
@onImageSelected="imageSelected($event)"
></product-image-item>
<draggable v-model="items" group="people" @end="onDragEnd">
<product-image-item
v-for='(image, index) in items'
:key='image.id'
:image="image"
@onRemoveImage="removeImage($event)"
@onImageSelected="imageSelected($event)">
</product-image-item>
</draggable>
</div>
<label class="btn btn-lg btn-primary" style="display: inline-block; width: auto" @click="createFileType">
@ -73,7 +77,7 @@
imageCount: 0,
items: []
items: [],
}
},
@ -102,7 +106,7 @@
this.items.push({'id': 'image_' + this.imageCount});
},
removeImage (image) {
removeImage: function(image) {
let index = this.items.indexOf(image)
Vue.delete(this.items, index);
@ -118,7 +122,11 @@
self.items.push({'id': 'image_' + self.imageCount, file: image});
}
});
}
},
onDragEnd: function() {
console.log(this.items);
},
}
});
@ -192,4 +200,4 @@
}
});
</script>
@endpush
@endpush

View File

@ -1,33 +1,34 @@
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21.0",
"cross-env": "^6.0.3",
"flatpickr": "^4.6.3",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.0",
"laravel-mix-merge-manifest": "^0.1.2",
"sass": "^1.24.4",
"sass-loader": "^8.0.2",
"vue": "^2.6.14",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"@babel/polyfill": "^7.7.0",
"tooltip.js": "^1.3.1",
"url-polyfill": "^1.1.5",
"url-search-params-polyfill": "^6.0.0",
"v-tooltip": "^2.0.3",
"vue-multiselect": "^2.1.6",
"vue-swatches": "^1.0.3"
}
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21.0",
"cross-env": "^6.0.3",
"flatpickr": "^4.6.3",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.0",
"laravel-mix-merge-manifest": "^0.1.2",
"sass": "^1.24.4",
"sass-loader": "^8.0.2",
"vue": "^2.6.14",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"@babel/polyfill": "^7.7.0",
"tooltip.js": "^1.3.1",
"url-polyfill": "^1.1.5",
"url-search-params-polyfill": "^6.0.0",
"v-tooltip": "^2.0.3",
"vue-multiselect": "^2.1.6",
"vue-swatches": "^1.0.3",
"vuedraggable": "^2.24.3"
}
}

File diff suppressed because one or more lines are too long

View File

@ -30,3 +30,10 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
/**!
* Sortable 1.10.2
* @author RubaXa <trash@rubaxa.org>
* @author owenm <owen23355@gmail.com>
* @license MIT
*/

View File

@ -1,4 +1,4 @@
{
"/js/ui.js": "/js/ui.js?id=99de3c7f62be5fb50eaf",
"/js/ui.js": "/js/ui.js?id=421e7a0c9d071a0d2ccc",
"/css/ui.css": "/css/ui.css?id=57354f5eea4eb6f616e9"
}

View File

@ -1,5 +1,6 @@
import VTooltip from "v-tooltip";
import draggable from 'vuedraggable';
import { Multiselect } from "vue-multiselect";
import VTooltip from "v-tooltip";
import Accordian from "./components/accordian";
import DatagridPlus from "./components/datagrid/datagrid-plus";
@ -31,6 +32,8 @@ import SlugifyTarget from "./directives/slugify-target";
VTooltip.options.defaultDelay = 0;
Vue.config.productionTip = false;
Vue.use(draggable);
/* component section */
Vue.directive("tooltip", VTooltip.VTooltip);
Vue.component("datagrid-plus", DatagridPlus);