Question

我正在研究两个表之间的匹配功能，无法将一个表行拖放到另一表的行上。

首先，我想知道是否可以使用表？

我正在以1.5角进行开发

代码段：

<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;
};

问题： 当我开始从第一个表中拖动tr时，仅调用dragstart事件，而没有其他任何事件。任何帮助将不胜感激。

编辑：

指令代码：

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();
    };
  }
});

Answer 1

要获得预期结果，请使用以下HTML5拖放选项

使用索引并为第一个表设置行ID
使用draggable true允许拖动第一个表格行
使用拖动元素的ID，附加到第二张表

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>

选项2：对列表元素使用角度拖放库

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

将表1的tr拖放到表2的tr上

1 个答案: