Vue Draggable Added
This commit is contained in:
parent
37ab87e54c
commit
836f3679b1
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue