fix dataTransfer for touch based events

ekokotov · Jan 25, 2016 · 1d5075e · 1d5075e
1 parent e159785
commit 1d5075e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -38,7 +38,7 @@
 <script type="text/javascript" src="../src/js/objectTableFilters.js"></script>
 <script type="text/javascript" src="../src/js/objectTableUtilService.js"></script>
 <script type="text/javascript" src="example.js"></script>
-<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
+<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
 
 <body ng-controller="mainController">
     <div class="col-sm-12">

diff --git a/src/js/draggableDirective.js b/src/js/draggableDirective.js
@@ -1,49 +1,51 @@
-angular.module('objectTable').directive("allowDrag", function() {
+angular.module('objectTable').directive('allowDrag', function() {
   return {
-    restrict: "A",
-    controller:function(){},
-    compile:function (el,attr){
+    restrict: 'A',
+    controller: function() {},
+    compile: function(el, attr) {
 
-      function removeDragClass(element,className){
+      function removeDragClass(element, className) {
         var elm = element[0].parentNode.querySelector('.' + className);
-        if(!!elm)
+        if (!!elm)
           elm.classList.remove(className);
       }
 
-      return function pre(scope, element, attrs,ctrl) {
+      return function pre(scope, element, attrs, ctrl) {
         element.attr('draggable',true);
 
-        element.bind("dragstart", function( e ) {
+        element.bind('dragstart', function(e) {
           ctrl.target = this;
-          this.classList.add("dragged");
-          e.dataTransfer.setData("text", ctrl.target.cellIndex);
+          this.classList.add('dragged');
+          var ev = e.originalEvent || e; // override event for touch events
+          ev.dataTransfer.setData('text', ctrl.target.cellIndex);
         });
 
-        element.bind("dragover", function( e ) {
+        element.bind('dragover', function(e) {
           e.preventDefault();
         });
 
-        element.bind("dragenter", function( e ) {
+        element.bind('dragenter', function(e) {
           ctrl.toTarget = this;
-          if(!this.classList.contains("draggedOver") && !this.classList.contains("dragged"))
-            this.classList.add("draggedOver");
+          if (!this.classList.contains('draggedOver') && !this.classList.contains('dragged'))
+            this.classList.add('draggedOver');
           e.preventDefault();
           e.stopPropagation();
         });
 
-        element.bind("dragend", function( e ) {
-          if(this.classList.contains("dragged"))
-            this.classList.remove("dragged");
+        element.bind('dragend', function(e) {
+          if (this.classList.contains('dragged'))
+            this.classList.remove('dragged');
           e.preventDefault();
         });
 
-        element.bind("dragleave", function( e ) {
-          this.classList.remove("draggedOver");
+        element.bind('dragleave', function(e) {
+          this.classList.remove('draggedOver');
         });
 
-        element.bind("drop", function( e ) {
+        element.bind('drop', function(e) {
          var currentIndex = ctrl.toTarget.cellIndex,
-         draggedIndex = parseInt(e.dataTransfer.getData("text"),10);
+         ev = e.originalEvent || e,
+         draggedIndex = parseInt(ev.dataTransfer.getData('text'),10);
          removeDragClass(element, 'dragged');
          removeDragClass(element, 'draggedOver');
          element.parent().controller('objectTable').changeColumnsOrder(currentIndex,draggedIndex);
@@ -53,4 +55,4 @@ angular.module('objectTable').directive("allowDrag", function() {
     }
 
   };
-});
+});