append option dropCriteria

dabeng · Jun 28, 2016 · 358b58c · 358b58c
1 parent 88de4a5
commit 358b58c
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -352,7 +352,21 @@ $('#btn-delete-nodes').on('click', function() {
 
 - **[I wanna drag & drop the nodes of orgchart](http://dabeng.github.io/OrgChart/drag-drop/)**
 
-Users are allowed to drag & drop the nodes of orgchart when option "draggable" is assigned to true.
+Users are allowed to drag & drop the nodes of orgchart when option "draggable" is assigned to true. Furthermore, users can make use of option dropCriteria to inject their custom limitations on drag & drop. As shown below, we don't want an manager employee to be under a engineer under no circumstance.
+```js
+// sample of core source code
+$('#chart-container').orgchart({
+  'data' : datascource,
+  'nodeContent': 'title',
+  'draggable': true,
+  'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
+    if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
+      return false;
+    }
+    return true;
+  }
+})
+```
 
 ![drag & drop](http://dabeng.github.io/OrgChart/drag-drop/recorder.gif)
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <[email protected]>"

diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js
@@ -674,20 +674,29 @@
       $nodeDiv.on('dragstart', function(event) {
         event.originalEvent.dataTransfer.setData('text/html', 'hack for firefox');
         var $dragged = $(this);
-        var $draggedZone = $dragged.closest('table').find('.node');
+        var $dragZone = $dragged.closest('.nodes').siblings().eq(0).find('.node:first');
+        var $dragHier = $dragged.closest('table').find('.node');
         $dragged.closest('.orgchart')
           .data('dragged', $dragged)
           .find('.node').each(function(index, node) {
-            if ($draggedZone.index(node) === -1) {
-              $(node).addClass('allowedDrop');
+            if ($dragHier.index(node) === -1) {
+              if (opts.dropCriteria) {
+                if (opts.dropCriteria($dragged, $dragZone, $(node))) {
+                  $(node).addClass('allowedDrop');
+                }
+              } else {
+                $(node).addClass('allowedDrop');
+              }
             }
           });
       })
       .on('dragover', function(event) {
         event.preventDefault();
         var $dropZone = $(this);
         var $dragged = $dropZone.closest('.orgchart').data('dragged');
-        if ($dragged.closest('table').find('.node').index($dropZone) > -1) {
+        var $dragZone = $dragged.closest('.nodes').siblings().eq(0).find('.node:first');
+        if ($dragged.closest('table').find('.node').index($dropZone) > -1 ||
+          (opts.dropCriteria && !opts.dropCriteria($dragged, $dragZone, $dropZone))) {
           event.originalEvent.dataTransfer.dropEffect = 'none';
         }
       })

diff --git a/examples/drag-drop/scripts.js b/examples/drag-drop/scripts.js
@@ -9,7 +9,7 @@
       'title': 'general manager',
       'children': [
         { 'name': 'Bo Miao', 'title': 'department manager',
-          'children': [{ 'name': 'Li Xin', 'title': 'senior' }]
+          'children': [{ 'name': 'Li Xin', 'title': 'senior engineer' }]
         },
         { 'name': 'Su Miao', 'title': 'department manager',
           'children': [
@@ -30,7 +30,13 @@
     $('#chart-container').orgchart({
       'data' : datascource,
       'nodeContent': 'title',
-      'draggable': true
+      'draggable': true,
+      'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
+        if($draggedNode.find('.content').text().indexOf('manager') > -1 && $dropZone.find('.content').text().indexOf('engineer') > -1) {
+          return false;
+        }
+        return true;
+      }
     })
     .children('.orgchart').on('nodedropped.orgchart', function(event) {
       console.log('draggedNode:' + event.draggedNode.children('.title').text()

diff --git a/examples/js/jquery.orgchart.js b/examples/js/jquery.orgchart.js
@@ -674,20 +674,29 @@
       $nodeDiv.on('dragstart', function(event) {
         event.originalEvent.dataTransfer.setData('text/html', 'hack for firefox');
         var $dragged = $(this);
-        var $draggedZone = $dragged.closest('table').find('.node');
+        var $dragZone = $dragged.closest('.nodes').siblings().eq(0).find('.node:first');
+        var $dragHier = $dragged.closest('table').find('.node');
         $dragged.closest('.orgchart')
           .data('dragged', $dragged)
           .find('.node').each(function(index, node) {
-            if ($draggedZone.index(node) === -1) {
-              $(node).addClass('allowedDrop');
+            if ($dragHier.index(node) === -1) {
+              if (opts.dropCriteria) {
+                if (opts.dropCriteria($dragged, $dragZone, $(node))) {
+                  $(node).addClass('allowedDrop');
+                }
+              } else {
+                $(node).addClass('allowedDrop');
+              }
             }
           });
       })
       .on('dragover', function(event) {
         event.preventDefault();
         var $dropZone = $(this);
         var $dragged = $dropZone.closest('.orgchart').data('dragged');
-        if ($dragged.closest('table').find('.node').index($dropZone) > -1) {
+        var $dragZone = $dragged.closest('.nodes').siblings().eq(0).find('.node:first');
+        if ($dragged.closest('table').find('.node').index($dropZone) > -1 ||
+          (opts.dropCriteria && !opts.dropCriteria($dragged, $dragZone, $dropZone))) {
           event.originalEvent.dataTransfer.dropEffect = 'none';
         }
       })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.js",
   "style": [