Skip to content

Instantly share code, notes, and snippets.

@savepong

savepong/index.html

Created December 14, 2020 09:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save savepong/a4d44826b22b5f55ead22525b27de7b7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save savepong/a4d44826b22b5f55ead22525b27de7b7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. savepong created this gist Dec 14, 2020.
    26 changes: 26 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <div id="app">
    <v-app id="inspire">
    <v-card
    class="mx-auto"
    tile
    >

    <draggable v-for="(item, index) in images"
    v-model="images[index]"
    group="image"
    animation="150"
    selected-class="sortableSelected"
    ghost-class="imageGhost"
    @change="imagesChanged"
    tag="v-layout"
    class="sortableRow imageContainer"
    :component-data="{row: true}"
    :force-fallback="true"
    multi-drag>
    <v-flex v-for="image in item" class="droppableImage" :key="image.path">
    {{image}}
    </v-flex>
    </draggable>
    </v-card>
    </v-app>
    </div>
    7 changes: 7 additions & 0 deletions sample-multi-drag-code.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Sample Multi Drag Code
    ----------------------


    A [Pen](https://codepen.io/Flip535/pen/jOOKBZj) by [Felipe Prieto](https://codepen.io/Flip535) on [CodePen](https://codepen.io).

    [License](https://codepen.io/Flip535/pen/jOOKBZj/license).
    22 changes: 22 additions & 0 deletions script.babel
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@


    new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
    images: [[
    'Real-Time',
    'Audience',
    'Conversions',
    ],[
    'Real-Time2',
    'Audience2',
    'Conversions2',
    ]]
    }),
    methods: {
    imagesChanged(e) {
    console.log(e)
    }
    }
    })
    5 changes: 5 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Flip535/Vue.Draggable@be82d2a15f99fc80c0fc836aa8550ff07d943a60/dist/vuedraggable.umd.js"></script>
    17 changes: 17 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    .sortableSelected {
    background-color: yellow;
    }

    .imageContainer {
    border: solid 10px black;
    padding: 4px;
    }

    .droppableImage {
    border: solid 1px black;
    margin: 5px;
    }

    .imageGhost {
    background-color: lightblue
    }
    4 changes: 4 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />