Drag & Drop

by cmaai

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Drag & Drop</title>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/liquor-tree"></script>
</head>
<body>
  <div id="app">
    <tree
      :data="treeData"
      :options="treeOptions"
      @node:dragging:start="logDragStart"
      @node:dragging:finish="logDragFinish"
    />
  </div>
  <script>
    new Vue({
        el: '#app',
        data: () => ({
          treeData: getTreeData(),
          treeOptions: {
            propertyNames: {
              text: 'MY_TEXT',
              children: 'KIDS',
              state: 'OPTIONS'
            },
            dnd: true,
            checkbox: true
          }
        }),
        
        methods: {
        	logDragStart(node) {
          	console.log('Start dragging: ' + JSON.stringify(node))
          },
          
        	logDragFinish(targetNode, distinationNode) {
          	console.log(`Stop dragging: [TARGET]${targetNode.text}`)
          	console.log(`Stop dragging: [distinationNode]${distinationNode.text}`)
          }
        }
      })

      function getTreeData() {
        return [
          {
            MY_TEXT: 'JS: The Right Way',
            OPTIONS: { expanded: true },
            KIDS: [
              { MY_TEXT: 'Getting Started (NOT DRAGGABLE)', OPTIONS: { checked: true, draggable: false } },
              { MY_TEXT: 'JavaScript Code Style', OPTIONS: { selected: true } },
              { MY_TEXT: 'MVC Pattern (NOT DROPABLE)', OPTIONS: {dropable: false} },
              { MY_TEXT: 'MVP Pattern' },
              { MY_TEXT: 'MVVM Pattern' },
              { MY_TEXT: 'The Good Parts', KIDS: [
                { MY_TEXT: 'OBJECT ORIENTED', OPTIONS: { checked: true }  },
                { MY_TEXT: 'ANONYMOUS FUNCTIONS', OPTIONS: { checked: true }  },
                { MY_TEXT: 'FUNCTIONS AS FIRST-CLASS OBJECTS', OPTIONS: { checked: true }  },
                { MY_TEXT: 'LOOSE TYPING', OPTIONS:...