feat(event): add drop-before and drop-after

Merge pull request #37 from zymawy/patch-1
Duplicate Declaration On onClick Method
2019-07-17 09:54:15 +08:00 · 2019-06-16 10:47:35 +08:00 · 2019-06-15 05:56:21 +03:00 · 2019-03-15 22:49:45 +08:00 · 2019-03-13 09:48:20 +01:00 · 2019-03-13 09:45:25 +01:00
16 changed files with 361 additions and 169 deletions
--- a/.commitlintrc.yml
+++ b/.commitlintrc.yml
@@ -0,0 +1,2 @@
+extends:
+  - "@commitlint/config-conventional"
--- a/.czrc
+++ b/.czrc
@@ -0,0 +1,3 @@
+{
+  "path": "cz-conventional-changelog"
+}
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 npm-debug.log
 .idea
 coverage
+package-lock.json
--- a/.huskyrc.yml
+++ b/.huskyrc.yml
@@ -0,0 +1,4 @@
+hooks:
+  pre-commit:
+    - npm run standard
+  commit-msg: commitlint -E HUSKY_GIT_PARAMS
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -1,5 +1,4 @@
-var webpack = require('webpack');
-var path = require('path');
+var path = require('path')

 var projectRoot = path.resolve(__dirname, '../')

--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -2,9 +2,6 @@ var webpack = require('webpack')
 var merge = require('webpack-merge')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var baseConfig = require('./webpack.base.conf')
-var path = require('path')
-
-var projectRoot = path.resolve(__dirname, '../')

 module.exports = merge(baseConfig, {
  entry: './dev/index.js',
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -1,7 +1,23 @@
 <template>
    <div>
        <button @click="addNode">Add Node</button>
-        <vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
+        <vue-tree-list
+          @click="onClick"
+          @change-name="onChangeName"
+          @delete-node="onDel"
+          @add-node="onAddNode"
+          @drop="drop"
+          @drop-before="dropBefore"
+          @drop-after="dropAfter"
+          :model="data"
+          default-tree-node-name="new node"
+          default-leaf-node-name="new leaf"
+          v-bind:default-expanded="false">
+          <span class="icon" slot="addTreeNode">addTreeNode</span>
+          <span class="icon" slot="addLeafNode">addLeafNode</span>
+          <span class="icon" slot="editNode">editNode</span>
+          <span class="icon" slot="delNode">delNode</span>
+        </vue-tree-list>
        <button @click="getNewTree">Get new tree</button>
        <pre>
          {{newTree}}
@@ -23,6 +39,10 @@
            id: 1,
            pid: 0,
            dragDisabled: true,
+            addTreeNodeDisabled: true,
+            addLeafNodeDisabled: true,
+            editNodeDisabled: true,
+            delNodeDisabled: true,
            children: [
              {
                name: 'Node 1-2',
@@ -47,13 +67,42 @@
      }
    },
    methods: {
-      addNode: function () {
+      onDel (node) {
+        console.log(node)
+        node.remove()
+      },
+
+      onChangeName (params) {
+        console.log(params)
+      },
+
+      onAddNode (params) {
+        console.log(params)
+      },
+
+      onClick (params) {
+        console.log(params)
+      },
+
+      drop: function ({node, src, target}) {
+        console.log('drop', node, src, target)
+      },
+
+      dropBefore: function ({node, src, target}) {
+        console.log('drop-before', node, src, target)
+      },
+
+      dropAfter: function ({node, src, target}) {
+        console.log('drop-after', node, src, target)
+      },
+
+      addNode () {
        var node = new TreeNode({ name: 'new node', isLeaf: false })
        if (!this.data.children) this.data.children = []
        this.data.addChildren(node)
      },

-      getNewTree: function () {
+      getNewTree () {
        var vm = this
        function _dfs (oldNode) {
          var newNode = {}
@@ -95,3 +144,11 @@
    }
  }
 </style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>
--- a/dev/index.html
+++ b/dev/index.html
@@ -3,7 +3,7 @@
 <head>
    <meta name="viewport" content="with=device-width,initial-scale=1.0,
      maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
-    <title>vue-date-range</title>
+    <title>vue-tree-list</title>
 </head>
 <body>
 <div id="app"></div>
--- a/dist/vue-tree-list.min.js
+++ b/dist/vue-tree-list.min.js
--- a/examples/demo1.html
+++ b/examples/demo1.html
@@ -59,6 +59,27 @@
            }
        }

+        .vtl .vtl-drag-disabled, .vtl .vtl-drag-disabled:hover {
+          background-color: #dbd7d7;
+          position: relative;
+        }
+
+        .vtl .vtl-drag-disabled::after, .vtl .vtl-disabled::after {
+          content: 'drag disabled';
+          position: absolute;
+          right: 10px;
+          font-size: 12px;
+          font-style: italic;
+        }
+
+        .vtl .vtl-disabled, .vtl .vtl-disabled:hover {
+          background-color: red;
+          position: relative;
+        }
+
+        .vtl .vtl-disabled::after {
+          content: 'disabled';
+        }
    </style>
 </head>
 <body>
@@ -141,7 +162,7 @@
            name: 'Node 2',
            id: 3,
            pid: 0,
-            dragDisabled: true
+            disabled: true
          },
          {
            name: 'Node 3',
--- a/package.json
+++ b/package.json
@@ -1,9 +1,11 @@
 {
  "name": "vue-tree-list",
-  "version": "1.1.0",
+  "version": "1.3.2",
  "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
  "main": "dist/vue-tree-list.min.js",
  "scripts": {
+    "commit": "npx git-cz",
+    "standard": "standard",
    "test": "karma start --single-run",
    "unit": "karma start --watch",
    "coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
@@ -26,6 +28,8 @@
  },
  "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^7.1.2",
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
@@ -39,6 +43,8 @@
    "cross-env": "^5.0.1",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.8.1",
+    "husky": "^1.2.0",
    "isparta": "^4.0.0",
    "isparta-loader": "^2.0.0",
    "less": "^2.7.2",
@@ -46,14 +52,17 @@
    "sinon": "^2.3.5",
    "sinon-chai": "^2.11.0",
    "sourcemap": "^0.1.0",
+    "standard": "^12.0.1",
    "url-loader": "^0.5.7",
-    "vue": "^2.3.4",
+    "vue": "^2.6.6",
    "vue-loader": "^11.1.3",
    "vue-style-loader": "^2.0.3",
-    "vue-template-compiler": "^2.2.0",
+    "vue-template-compiler": "^2.6.6",
    "webpack": "^1.13.2",
    "webpack-dev-server": "1.14.0",
-    "webpack-merge": "^0.14.1",
-    "html-webpack-plugin": "^2.8.1"
+    "webpack-merge": "^0.14.1"
+  },
+  "dependencies": {
+    "cz-conventional-changelog": "^2.1.0"
  }
 }
--- a/readme.md
+++ b/readme.md
@@ -9,117 +9,195 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 ``npm install vue-tree-list``

 ```javascript
-<button @click="addNode">Add Node</button>
-<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
-<button @click="getNewTree">Get new tree</button>
-<pre>
-  {{newTree}}
-</pre>
-...
-import { VueTreeList, Tree, TreeNode } from '../src'
-export default {
-  components: {
-    VueTreeList
-  },
-  data () {
-    return {
-      newTree: {},
-      data: new Tree([
-        {
-          name: 'Node 1',
-          id: 1,
-          pid: 0,
-          dragDisabled: true,
-          children: [
-            {
-              name: 'Node 1-2',
-              id: 2,
-              isLeaf: true,
-              pid: 1
-            }
-          ]
-        },
-        {
-          name: 'Node 2',
-          id: 3,
-          pid: 0,
-          dragDisabled: true
-        },
-        {
-          name: 'Node 3',
-          id: 4,
-          pid: 0
-        }
-      ])
-    }
-  },
-  methods: {
-    addNode: function () {
-      var node = new TreeNode({ name: 'new node', isLeaf: false })
-      if (!this.data.children) this.data.children = []
-      this.data.addChildren(node)
+<template>
+    <div>
+        <button @click="addNode">Add Node</button>
+        <vue-tree-list
+          @click="onClick"
+          @change-name="onChangeName"
+          @delete-node="onDel"
+          @add-node="onAddNode"
+          :model="data"
+          default-tree-node-name="new node"
+          default-leaf-node-name="new leaf"
+          v-bind:default-expanded="false">
+          <span class="icon" slot="addTreeNode">addTreeNode</span>
+          <span class="icon" slot="addLeafNode">addLeafNode</span>
+          <span class="icon" slot="editNode">editNode</span>
+          <span class="icon" slot="delNode">delNode</span>
+        </vue-tree-list>
+        <button @click="getNewTree">Get new tree</button>
+        <pre>
+          {{newTree}}
+        </pre>
+    </div>
+</template>
+<script>
+  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
+  export default {
+    components: {
+      VueTreeList
    },
-
-    getNewTree: function () {
-      var vm = this
-      function _dfs (oldNode) {
-        var newNode = {}
-
-        for (var k in oldNode) {
-          if (k !== 'children' && k !== 'parent') {
-            newNode[k] = oldNode[k]
+    data () {
+      return {
+        newTree: {},
+        data: new Tree([
+          {
+            name: 'Node 1',
+            id: 1,
+            pid: 0,
+            dragDisabled: true,
+            addTreeNodeDisabled: true,
+            addLeafNodeDisabled: true,
+            editNodeDisabled: true,
+            delNodeDisabled: true,
+            children: [
+              {
+                name: 'Node 1-2',
+                id: 2,
+                isLeaf: true,
+                pid: 1
+              }
+            ]
+          },
+          {
+            name: 'Node 2',
+            id: 3,
+            pid: 0,
+            disabled: true
+          },
+          {
+            name: 'Node 3',
+            id: 4,
+            pid: 0
          }
-        }
-
-        if (oldNode.children && oldNode.children.length > 0) {
-          newNode.children = []
-          for (var i = 0, len = oldNode.children.length; i < len; i++) {
-            newNode.children.push(_dfs(oldNode.children[i]))
-          }
-        }
-        return newNode
+        ])
      }
-
-      vm.newTree = _dfs(vm.data)
    },
+    methods: {
+      onDel (node) {
+        console.log(node)
+        node.remove()
+      },
+
+      onChangeName (params) {
+        console.log(params)
+      },
+
+      onAddNode (params) {
+        console.log(params)
+      },
+
+      onClick (params) {
+        console.log(params)
+      },
+
+      addNode () {
+        var node = new TreeNode({ name: 'new node', isLeaf: false })
+        if (!this.data.children) this.data.children = []
+        this.data.addChildren(node)
+      },
+
+      getNewTree () {
+        var vm = this
+        function _dfs (oldNode) {
+          var newNode = {}
+
+          for (var k in oldNode) {
+            if (k !== 'children' && k !== 'parent') {
+              newNode[k] = oldNode[k]
+            }
+          }
+
+          if (oldNode.children && oldNode.children.length > 0) {
+            newNode.children = []
+            for (var i = 0, len = oldNode.children.length; i < len; i++) {
+              newNode.children.push(_dfs(oldNode.children[i]))
+            }
+          }
+          return newNode
+        }
+
+        vm.newTree = _dfs(vm.data)
+      },
      
-    onClick(model) {
-      console.log(model)
    }
  }
-}
+</script>
+<style lang="less" rel="stylesheet/less">
+  .vtl {
+    .vtl-drag-disabled {
+      background-color: #d0cfcf;
+      &:hover {
+        background-color: #d0cfcf;
+      }
+    }
+    .vtl-disabled {
+      background-color: #d0cfcf;
+    }
+  }
+</style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>
+
 ```

 # props
-**default-tree-node-name**
+## props of vue-tree-list
+| name | type | default | description |
+|:-----:|:-------:|:------------:|:----:|
+model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type
+default-tree-node-name | string | New node node | Default name for new treenode
+default-leaf-node-name | string | New leaf node | Default name for new leafnode
+default-expanded | boolean | true | Tree is expanded or not

- Default name for new treenode.

-**default-leaf-node-name**
+## props of TreeNode
+### attributes
+| name | type | default | description |
+|:-----:|:-------:|:------------:|:----:|
+id | string, number | current timestamp | The node's id
+isLeaf | boolean | false | The node is leaf or not
+dragDisabled | boolean | false | Forbid dragging tree node
+addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not
+addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not
+editNodeDisabled | boolean | false | Show `editNode` button or not
+delNodeDisabled | boolean | false | Show `delNode` button or not
+children | array | null | The children of node

-Default name for new leafnode.
+### methods
+| name | params | description |
+|:-----:|:-------:|:----:|
+changeName | name | Change node's name
+addChildren | children: object, array | Add children to node
+remove | - | Remove node from the tree
+moveInto | target: TreeNode | Move node into another node
+insertBefore | target: TreeNode | Move node before another node
+insertAfter | target: TreeNode | Move node after another node

 # events
-**click**
+| name | params | description |
+|:-----:|:-------:|:----:|
+click | TreeNode | Trigger when clicking a tree node
+change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name
+delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.
+add-node | TreeNode | Trigger after adding a new node
+drop | {node, src, target} | Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into
+drop-before | {node, src, target} | Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before
+drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after

-```javascript
-<vue-tree-list @click="onClick" ...
-...
-onClick(model) {
-  console.log(model)
-}
-...
+# customize operation icons
+The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
+
+```html
+<span class="icon" slot="addTreeNode">addTreeNode</span>
+<span class="icon" slot="addLeafNode">addLeafNode</span>
+<span class="icon" slot="editNode">editNode</span>
+<span class="icon" slot="delNode">delNode</span>
 ```
-
-# Forbid dragging
-Use `dragDisabled` to forbid dragging:
-```javascript
-data: new Tree([
-  {
-    name: 'Node 1',
-    id: 1,
-    pid: 0,
-    dragDisabled: true,
-  ...
-```
-
--- a/src/Tree.js
+++ b/src/Tree.js
@@ -1,5 +1,3 @@
-let nodeId = 1
-
 /**
 * Tree data struct
 * Created by ayou on 2017/7/20.
@@ -12,10 +10,8 @@ let nodeId = 1
 */
 const TreeNode = function (data) {
  const { id, isLeaf } = data
-  // this.name = name
-  this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
+  this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
  this.parent = null
-  // this.pid = null
  this.children = null
  this.isLeaf = !!isLeaf

@@ -31,7 +27,7 @@ TreeNode.prototype.changeName = function (name) {
  this.name = name
 }

-TreeNode.prototype.addChildren = function (children, isNew) {
+TreeNode.prototype.addChildren = function (children) {
  if (!this.children) {
    this.children = []
  }
--- a/src/VueTreeList.vue
+++ b/src/VueTreeList.vue
@@ -2,7 +2,7 @@
  <div class='vtl'>
    <div v-if="model.name !== 'root'">
      <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
-        @drop="dropUp"
+        @drop="dropBefore"
        @dragenter="dragEnterUp"
        @dragover='dragOverUp'
        @dragleave="dragLeaveUp"></div>
@@ -37,23 +37,23 @@
        </div>
        <input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
        <div class="vtl-operation" v-show="isHover">
-          <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf">
+          <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
            <slot name="addTreeNode">
              <i class="vtl-icon vtl-icon-folder-plus-e"></i>
            </slot>
          </span>
-          <span title="add tree node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf">
+          <span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
            <slot name="addLeafNode">
              <i class="vtl-icon vtl-icon-plus"></i>
            </slot>
          </span>
-          <span title="edit" @click.stop.prevent="setEditable">
-            <slot name="edit">
+          <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
+            <slot name="editNode">
              <i class="vtl-icon vtl-icon-edit"></i>
            </slot>
          </span>
-          <span title="delete" @click.stop.prevent="delNode">
-            <slot name="edit">
+          <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
+            <slot name="delNode">
              <i class="vtl-icon vtl-icon-trash"></i>
            </slot>
          </span>
@@ -63,18 +63,23 @@
      <div v-if="model.children && model.children.length > 0 && expanded"
        class="vtl-border vtl-bottom"
        :class="{'vtl-active': isDragEnterBottom}"
-        @drop="dropBottom"
+        @drop="dropAfter"
        @dragenter="dragEnterBottom"
        @dragover='dragOverBottom'
        @dragleave="dragLeaveBottom"></div>
    </div>

-    <div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder">
+    <div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="model.name === 'root' || expanded" v-if="isFolder">
      <item v-for="model in model.children"
        :default-tree-node-name="defaultTreeNodeName"
        :default-leaf-node-name="defaultLeafNodeName"
+        v-bind:default-expanded="defaultExpanded"
        :model="model"
        :key='model.id'>
+          <slot name="addTreeNode" slot="addTreeNode" />
+          <slot name="addLeafNode" slot="addLeafNode" />
+          <slot name="editNode" slot="editNode" />
+          <slot name="delNode" slot="delNode" />
      </item>
    </div>
  </div>
@@ -84,7 +89,7 @@
  import { Tree, TreeNode } from './Tree.js'
  import { addHandler, removeHandler } from './tools.js'

-  let fromComp = null
+  let compInOperation = null

  export default {
    data: function () {
@@ -94,7 +99,7 @@
        isDragEnterUp: false,
        isDragEnterBottom: false,
        isDragEnterNode: false,
-        expanded: true
+        expanded: this.defaultExpanded
      }
    },
    props: {
@@ -108,6 +113,10 @@
      defaultTreeNodeName: {
        type: String,
        default: 'New tree node'
+      },
+      defaultExpanded: {
+        type: Boolean,
+        default: true
      }
    },
    computed: {
@@ -155,21 +164,23 @@
    },
    methods: {
      updateName (e) {
+        var oldName = this.model.name;
        this.model.changeName(e.target.value)
+        var node = this.getRootNode();
+        node.$emit('change-name', {'id': this.model.id, 'oldName': oldName, 'newName': e.target.value})
      },

      delNode () {
-        const vm = this
-        if (window.confirm('Are you sure?')) {
-          vm.model.remove()
-        }
+        var node = this.getRootNode()
+        node.$emit('delete-node', this.model)
      },

      setEditable () {
        this.editable = true
        this.$nextTick(() => {
-          this.$refs.nodeInput.focus()
-//          fireFocusEvent(this.$refs.nodeInput)
+          const $input = this.$refs.nodeInput
+          $input.focus()
+          $input.setSelectionRange(0, $input.value.length)
        })
      },

@@ -193,12 +204,8 @@
      },

      click() {
-        var node = this.$parent
-        var clickModel = this.model
-        while (node._props.model.name !== 'root') {
-          node = node.$parent
-        }
-        node.$emit('click', clickModel)
+        var node = this.getRootNode()
+        node.$emit('click', this.model);
      },

      addChild(isLeaf) {
@@ -206,11 +213,13 @@
        this.expanded = true
        var node = new TreeNode({ name, isLeaf })
        this.model.addChildren(node, true)
+        var root = this.getRootNode();
+        root.$emit('add-node', node)
      },

      dragStart(e) {
        if (!(this.model.dragDisabled || this.model.disabled)) {
-          fromComp = this
+          compInOperation = this
          // for firefox
          e.dataTransfer.setData("data","data");
          e.dataTransfer.effectAllowed = 'move'
@@ -219,14 +228,14 @@
        return false
      },
      dragEnd(e) {
-        fromComp = null
+        compInOperation = null
      },
      dragOver(e) {
        e.preventDefault()
        return true
      },
      dragEnter(e) {
-        if (!fromComp) return
+        if (!compInOperation) return
        if (this.model.isLeaf) return
        this.isDragEnterNode = true
      },
@@ -234,13 +243,16 @@
        this.isDragEnterNode = false
      },
      drop(e) {
-        if (!fromComp) return
-        fromComp.model.moveInto(this.model)
+        if (!compInOperation) return
+        const oldParent = compInOperation.model.parent;
+        compInOperation.model.moveInto(this.model)
        this.isDragEnterNode = false
+        var node = this.getRootNode();
+        node.$emit('drop', {target: this.model, node: compInOperation.model, src: oldParent})
      },

      dragEnterUp () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterUp = true
      },
      dragOverUp (e) {
@@ -248,17 +260,20 @@
        return true
      },
      dragLeaveUp () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterUp = false
      },
-      dropUp () {
-        if (!fromComp) return
-        fromComp.model.insertBefore(this.model)
+      dropBefore () {
+        if (!compInOperation) return
+        const oldParent = compInOperation.model.parent;
+        compInOperation.model.insertBefore(this.model)
        this.isDragEnterUp = false
+        var node = this.getRootNode();
+        node.$emit('drop-before', {target: this.model, node: compInOperation.model, src: oldParent})
      },

      dragEnterBottom () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterBottom = true
      },
      dragOverBottom (e) {
@@ -266,13 +281,23 @@
        return true
      },
      dragLeaveBottom () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterBottom = false
      },
-      dropBottom () {
-        if (!fromComp) return
-        fromComp.model.insertAfter(this.model)
+      dropAfter () {
+        if (!compInOperation) return
+        const oldParent = compInOperation.model.parent;
+        compInOperation.model.insertAfter(this.model)
        this.isDragEnterBottom = false
+        var node = this.getRootNode();
+        node.$emit('drop-after', {target: this.model, node: compInOperation.model, src: oldParent})
+      },
+      getRootNode() {
+        var node = this.$parent
+        while (node._props.model.name !== 'root') {
+          node = node.$parent
+        }
+        return node;
      }
    },
    beforeCreate () {
--- a/src/tools.js
+++ b/src/tools.js
@@ -4,24 +4,24 @@

 var handlerCache

-exports.addHandler = function(element, type, handler) {
+exports.addHandler = function (element, type, handler) {
  handlerCache = handler
  if (element.addEventListener) {
-    element.addEventListener(type, handler, false);
+    element.addEventListener(type, handler, false)
  } else if (element.attachEvent) {
-    element.attachEvent("on" + type, handler);
+    element.attachEvent('on' + type, handler)
  } else {
-    element["on" + type] = handler;
+    element['on' + type] = handler
  }
 }

 exports.removeHandler = function (element, type) {
  if (element.removeEventListener) {
-    element.removeEventListener(type, handlerCache, false);
+    element.removeEventListener(type, handlerCache, false)
  } else if (element.detachEvent) {
-    element.detachEvent("on" + type, handlerCache);
+    element.detachEvent('on' + type, handlerCache)
  } else {
-    element["on" + type] = null;
+    element['on' + type] = null
  }
 }
Author	SHA1	Message	Date
youxingzhi	cf41282fcf	feat(event): add drop-before and drop-after	2019-07-17 09:54:15 +08:00
ayou	6154cfd1ad	Merge pull request #37 from zymawy/patch-1 Duplicate Declaration On onClick Method	2019-06-16 10:47:35 +08:00
Hamza Ironside	51167862c9	Duplicate Declaration On onClick Method There Were Two Methods With The Same Name	2019-06-15 05:56:21 +03:00
ayou	e38102ed71	Merge pull request #27 from iakta/feature/drop-events Feature/drop events	2019-03-15 22:49:45 +08:00
Salvatore Giordano	d605642199	feat(events): add docs for drop and drop-up	2019-03-13 09:48:20 +01:00
Salvatore Giordano	62335d9eac	feat(events): rename event using dashes	2019-03-13 09:45:25 +01:00
Salvatore Giordano	625dadcb44	feat(events): add dropBottom event	2019-03-13 09:30:13 +01:00
youxingzhi	87b8a30bfb	fix(demo): change param name	2019-03-13 12:09:53 +08:00
youxingzhi	2164d032ca	feat: #23	2019-03-13 12:05:34 +08:00
Salvatore Giordano	538678d916	fix(events): fix oldParent object in drop events	2019-03-12 16:29:49 +01:00
Salvatore Giordano	dd3d61ddf7	feat(events): update version	2019-03-12 16:21:58 +01:00
Salvatore Giordano	e7757b97a7	feat(events): add oldParent information in drop event	2019-03-12 16:15:18 +01:00
Salvatore Giordano	76e67c583c	feat(events): emit drop and dropup events	2019-03-12 15:20:52 +01:00
youxingzhi	106708217f	chore(readme): fix format	2019-02-23 11:58:16 +08:00
youxingzhi	165d2dfb5d	chore(version): 1.3.0	2019-02-23 11:54:26 +08:00
youxingzhi	8f0a5d7737	feat: support closing operation icons	2019-02-23 11:52:58 +08:00
youxingzhi	a3b03a9579	chore(version): 1.2.0	2019-02-23 10:46:47 +08:00
youxingzhi	136b33971c	feat: support customizing operation icons	2019-02-23 10:44:34 +08:00
youxingzhi	3dd6e31028	chore(version): 1.1.2	2019-02-15 09:43:24 +08:00
youxingzhi	cde7836539	refactor: change event name	2019-02-15 09:41:53 +08:00
ayou	a8284583da	Merge pull request #20 from energiehund/feature/events-for-node-operations feat: Emit events for node operations	2019-02-15 09:23:25 +08:00
energiehund	8cb42cd952	feat: Emit events for node operations	2019-02-13 17:14:53 +08:00
youxingzhi	5ab8775ace	chore: 1.1.1	2019-01-03 09:56:25 +08:00
youxingzhi	3fec41a890	fix: add semi	2019-01-03 09:55:27 +08:00
youxingzhi	867ef2a7fa	chore(add husky): add standard and commitlint	2018-12-11 11:16:29 +08:00
youxingzhi	2b2b1419ad	chore: update demo update demo because of new style	2018-12-11 11:14:49 +08:00
ayou	47a4e2df8d	Merge pull request #16 from ParadeTo/fix-issue#14 fix issue #14, make delete node configurable	2018-12-11 10:29:18 +08:00
ayou	ec49d0e226	Merge branch 'master' into fix-issue#14	2018-12-11 10:29:07 +08:00
ayou	52a63af52f	Merge pull request #15 from ParadeTo/fix-issue#11 Fix issue#11	2018-12-11 10:23:41 +08:00
ayou	b10803df64	Merge pull request #17 from ParadeTo/fix-issue#13 fix issue #13	2018-12-08 22:20:50 +08:00
Zhiyuan Guo	7d35504b40	rm logs	2018-12-08 15:13:08 +08:00
Zhiyuan Guo	b2eba3e3c9	update readme	2018-12-08 15:11:11 +08:00
Zhiyuan Guo	d6826e1a24	fix issue #14 , make delete node configurable	2018-12-08 15:08:43 +08:00
Zhiyuan Guo	a815fc658b	fix issue #11	2018-12-08 14:43:35 +08:00
Zhiyuan Guo	572b045314	fix issue #13	2018-12-08 11:53:36 +08:00