daily pastebin goal
10%
SHARE
TWEET

Untitled

a guest Jan 21st, 2018 264 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div
  3.     class="key-block"
  4.     :class="{'is-hovering': isHovering}"
  5.     droppable="true"
  6.     @dragover.prevent="handleDragOver"
  7.     @dragleave="handleDragLeave"
  8.     @drop="handleDrop">
  9.     <span class="key">{{ text }}</span>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. export default {
  15.   name: 'Key',
  16.  
  17.   props: {
  18.     text: [String, Number]
  19.   },
  20.  
  21.   data() {
  22.     return {
  23.       isHovering: false
  24.     }
  25.   },
  26.  
  27.   methods: {
  28.     handleDragOver(e) {
  29.       this.isHovering = true
  30.     },
  31.  
  32.     handleDragLeave(e) {
  33.       this.isHovering = false
  34.     },
  35.  
  36.     handleDrop(e) {
  37.       this.isHovering = false
  38.       const data = e.dataTransfer.getData('data')
  39.       this.$emit('dragdrop', data)
  40.     }
  41.   }
  42. }
  43. </script>
  44.  
  45. <style>
  46. .key {
  47.   display: flex;
  48.   border: 2px solid #eee;
  49.   border-radius: 2px;
  50.   text-align: center;
  51.   align-items: center;
  52.   justify-content: center;
  53.   height: 100%;
  54.   width: 100%;
  55. }
  56.  
  57. .is-hovering {
  58.   background-color: red;
  59. }
  60. </style>
RAW Paste Data
Top