vue-dialog-drag example

https://github.com/emiliorizzo/vue-dialog-drag

by emii

HTML

<link rel="stylesheet" href="https://rawgit.com/emiliorizzo/vue-dialog-drag/master/dist/vue-dialog-drag.css">
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://rawgit.com/emiliorizzo/vue-dialog-drag/master/dist/dialog-styles.css">
<script src="https://rawgit.com/emiliorizzo/vue-dialog-drag/master/dist/vue-drop-area.umd.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/emiliorizzo/vue-dialog-drag/master/dist/vue-drop-area.css">
<script src="https://rawgit.com/emiliorizzo/vue-dialog-drag/master/dist/vue-dialog-drag.umd.min.js"></script>
<body>
  <div id="app">
  
  <!--dialog 1 -->
    <dialog-drag title="test dialog" id="d1" :options="{ width:250,top:250 }" @drag-start="dialogDrag">
      <p>This is a test <strong>dialog</strong></p>
    </dialog-drag>
    
   <!--dialog 2 --> 
    <dialog-drag title="dialog 2" id="d2" :options="{ left:260, top:250 }" class="dialog-1" @drag-start="dialogDrag">
      <p>Dialog <strong>style 1</strong> example</p>
    </dialog-drag>
   
   <!--dialog 3 --> 
    <dialog-drag title="dialog 3" id="d3" :options="{ left:520, top:250 }" class="dialog-3" @drag-start="dialogDrag">
       <p>Dialog <strong>style 3</strong> example</p>
    </dialog-drag>
    
    <!-- drop area-->
    <drop-area @drop="drop">
      <p> Drop dialog here </p>
    </drop-area>
    
    <!-- dropped message -->
    <p v-if="dropped"> The dialog <strong> {{dropped}} </strong> <em> was dropped</em> </p>
  </div>
</body>

JavaScript

var DialogDrag = window['vue-dialog-drag']
    var DropArea = window['vue-drop-area']
    new Vue({
      el: '#app',
      components: {
        DialogDrag,
        DropArea
      },
      data: {
        dropped: null
      },
      methods: {
        drop(id) {
          this.dropped = id
        },
        dialogDrag() {
          this.dropped = null
        }
      }
    })