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"
      ref="tree"
    />
  </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: ' + node.text)
          },
          
        	logDragFinish(targetNode, distinationNode) {
            let siblings = distinationNode.parent.children;
            let index = siblings.findIndex(x=>x.id === targetNode.id)
            let pre = (index === -1 || index===0) ? null : siblings[index-1]
            console.log(`pre: ${pre && pre.text}`)
          	console.log(`Stop dragging: [TARGET]${targetNode.text},[distnationNode]${distinationNode.text}`)
            console.log(JSON.stringify(targetNode))
            console.log(JSON.stringify(this.$refs.tree.findAll()))
          }
        }
      })

      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' },
             ...