Bdtjtk

I am working on a matching functionality between two tables and unable to achieve the drag and drop of one table row on to the other table's row.

First of all, I want to know if its possible using tables?

I am developing in angular 1.5

Code snippet:

<table class="table table-hover header-fixed">

                <thead>

                    <th>Part Num</th>

                    <th>Line Abbrev</th>

                    <th>Desc</th>

                    <th>Qty</th>

                    <th></th>

                </thead>

                <tbody>

                    <tr ng-if="$ctrl.ppseList.length > 0"

                        ng-repeat="p in $ctrl.ppseList"

                        ng-class="{'active': ($index == $ctrl.pair.secondary)}"

                        ng-click="click($index, false)" 

                        draggable="true"

                        ng-dragstart="onDragStart($event, $index)"

                        ng-dragend="onDragEnd($event)">

                        <td>{{p.PartNum}}</td>

                        <td>{{p.LineAbbrev}}</td>

                        <td>{{p.Desc}}</td>

                        <td>{{p.ReqQty}}</td>

                        <td>

                            <button type="button" name="button"

                                class="btn btn-xs btn-success"

                                ng-click="addCartItemToUncategorizedList(p, $index);"><i class="fa fa-plus"></i></button>

                            <button type="button" name="button"

                                class="btn btn-xs btn-danger"

                                ng-click="removeCartItemFromCart(p, $index);"><i class="fa fa-minus"></i></button>

                        </td>

                    </tr>

                    <tr ng-if="$ctrl.ppseList.length == 0">

                        <td>Cart is empty <i class="fa fa-star-half-empty"></i></td>

                    </tr>

                </tbody>

            </table>

<table class="table table-hover header-fixed"

                   >

                <thead>

                    <th>Part Num</th>

                    <th>Line Abbrev</th>

                    <th>Desc</th>

                    <th>Qty</th>

                </thead>

                <tbody>

                    <tr ng-if="$ctrl.uncategorizedList.length > 0"

                        ng-repeat="p in $ctrl.uncategorizedList"

                        ng-class="{'active': ($index == $ctrl.pair.primary)}"

                        ng-click="click($index, true)" ng-dragover="onDragOver($event)"

                   ng-dragend="onDragEnd($event)">

                        <td>{{p.Partnum}}</td>

                        <td>{{p.LineAbbrv}}</td>

                        <td>{{p.Desc}}</td>

                        <td>{{p.ReqQty}}</td>

                    </tr>

                    <tr ng-if="$ctrl.uncategorizedList.length == 0">

                        <td colspan="4">No parts to match.</td>

                    </tr>

                </tbody>

            </table>

Javascript:

$scope.onDragStart = function (e, index) {

console.log('Started', e);

e.target.style.opacity = '0.4';

};







$scope.onDragEnd = function (e) {

    console.log('End', e);

  };







$scope.onDrop = function (e) {

    console.log('Drop', e.dataTransfer.getData('Text'));

};



$scope.onDragOver = function (e) {

    console.log('Drag Over', e);

    if (e.preventDefault) {

      e.preventDefault(); // Necessary. Allows us to drop.

    }



    e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.



  return false;

};

Problem:
When I start dragging the tr from the first table, only dragstart event is being called and nothing else is happening.
Any help would be appreciated.

Edit:

Directive code:

App.directive('ngDragenter', function($parse) {





return function(scope, element, attrs) {

    var fn = $parse(attrs.ngDragenter);

    element[0].ondragenter = function(e) {

      scope.$apply(function() {

        // scope.$eval(attrs.ngDragenter);

        fn(scope, {

          $event: event

        });

      });

      e.stopPropagation();

      e.preventDefault();

    };

  }

})

.directive('ngDragleave', function($parse) {

  return function(scope, element, attrs) {

    var fn = $parse(attrs.ngDragleave);

    element[0].ondragleave = function(e) {

      scope.$apply(function() {

        // scope.$eval(attrs.ngDragleave);

        fn(scope, {

          $event: event

        });

      });

      e.stopPropagation();

      e.preventDefault();

    };

  }

})

.directive('ngDragstart', function($parse) {

  return function(scope, element, attrs) {

    var fn = $parse(attrs.ngDragstart);

    element[0].ondragstart = function(e) {

      scope.$apply(function() {

        // scope.$eval(attrs.ngDragleave);

        fn(scope, {

          $event: event

        });

      });

      e.stopPropagation();

      e.preventDefault();

    };

  }

})

.directive('ngDragend', function($parse) {

  return function(scope, element, attrs) {

    var fn = $parse(attrs.ngDragend);

    element[0].ondragend = function(e) {

      scope.$apply(function() {

        // scope.$eval(attrs.ngDragend);

        fn(scope, {

          $event: event

        });

      });

      e.stopPropagation();

      e.preventDefault();

    };

  }

})

.directive('ngDragover', function($parse) {

  return function(scope, element, attrs) {

    var fn = $parse(attrs.ngDragover);

    element[0].ondragover = function(e) {

      scope.$apply(function() {

        // scope.$eval(attrs.ngDragend);

        fn(scope, {

          $event: event

        });

      });

      e.stopPropagation();

      e.preventDefault();

    };

  }

})

.directive('ngDrop', function($parse) {

  return function(scope, element, attrs) {

    var fn = $parse(attrs.ngDrop);

    element[0].ondrop = function(e) {

      scope.$apply(function() {

        // scope.$eval(attrs.ngDragend);

        fn(scope, {

          $event: event

        });

      });

      e.stopPropagation();

      e.preventDefault();

    };

  }

});

To achieve expected result, use below option of HTML5 drag and drop

1. Use index and set row id for first table


2. Use draggable true to allow dragging for first table rows


3. Using id of dragged element , append to second table

codepen- https://codepen.io/nagasai/pen/BvwWwd

var app = angular.module('myApp', );

app.controller('myCtrl', function($scope) {

    $scope.tab1 = [{

      id: 1,

      name: "a"

    },{

      id: 2,

      name: "b"

    },{

      id: 3,

      name: "c"

    }]

  

  $scope.tab2 = [{

      id: 1,

      name: "aa"

    },{

      id: 2,

      name: "bb"

    },{

      id: 3,

      name: "cc"

    }]

});



function allowDrop(ev) {

  ev.preventDefault();

}



function drag(ev) {

  ev.dataTransfer.setData("text", ev.target.id);

}



function drop(ev, el) {

  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");

  el.appendChild(document.getElementById(data));

}

table tr td {

  border: 1px solid black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<body>



<div ng-app="myApp" ng-controller="myCtrl">

  <div>Table 1

  <table>

    <tr ng-repeat="x in tab1" id="row{{$index}}" draggable="true"

ondragstart="drag(event)">

      <td>{{x.id}}</td>

      <td>{{x.name}}</td>

    </tr>

  </table>

    </div>

  <div>Table 2

  <table ondrop="drop(event, this)" ondragover="allowDrop(event)">

    <tr ng-repeat="x in tab2">

      <td>{{x.id}}</td>

      <td>{{x.name}}</td>

    </tr>

  </table>

    </div>



</div>





</body>

Option 2: Using angular drag and drop library with list elements

http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple