Angularjs拖放表列

Question

我使用"asutosh"代码:

myApp.directive('droppable', ['$parse',
function($parse) {
return {
  link: function(scope, element, attr) {
    function onDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      e.dataTransfer.dropEffect = 'move';
      return false;
    }
    function onDrop(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      var data = e.dataTransfer.getData("Text");
      data = angular.fromJson(data);
      var dropfn = attr.drop;
      var fn = $parse(attr.drop);
      scope.$apply(function() {
        scope[dropfn](data, e.target);
      });
    }

    element.bind("dragover", onDragOver);
    element.bind("drop", onDrop);


  }
};

}
]);
myApp.directive('draggable', function() {
return {
link: function(scope, elem, attr) {
  elem.attr("draggable", true);
  var dragDataVal='';
  var draggedGhostImgElemId='';
  attr.$observe('dragdata',function(newVal){
    dragDataVal=newVal;
  });
  attr.$observe('dragimage',function(newVal){
    draggedGhostImgElemId=newVal;
  });
  elem.bind("dragstart", function(e) {
    var sendData = angular.toJson(dragDataVal);
    e.dataTransfer.setData("Text", sendData);
    if (attr.dragimage !== 'undefined') {
      e.dataTransfer.setDragImage(
        document.getElementById(draggedGhostImgElemId), 0, 0
      );
    }
    var dragFn = attr.drag;
    if (dragFn !== 'undefined') {
      scope.$apply(function() {
        scope[dragFn](sendData);
      })
    }
  });

}

 };

 });

这里的

示例http://plnkr.co/edit/KvJglc?p=preview，用于拖放表列，但是此代码有一个小问题，当您在标题中的边框或空白区域上拖放列时，列会消失。有人能帮帮我吗?

Answer 1

myApp.directive('angTable', ['$compile',function($compile) {
return {
  restrict: 'E',
  templateUrl: 'tabletemplate.html',
  replace: true,
  scope: {
    conf: "="
  },
  controller: function($scope) {
    $scope.dragHead = '';
    $scope.dragImageId = "dragtable";

    $scope.handleDrop = function(draggedData,
      targetElem) {
      var swapArrayElements = function(array_object, index_a, index_b) {
        var temp = array_object[index_a];
        array_object[index_a] = array_object[index_b];
        array_object[index_b] = temp;
      };
      var srcInd = $scope.conf.heads.indexOf(draggedData);
      var destInd = $scope.conf.heads.indexOf(targetElem.textContent);
      swapArrayElements($scope.conf.heads, srcInd, destInd);
    };
    $scope.handleDrag = function(columnName) {
      $scope.dragHead = columnName.replace(/["']/g, "");
    };

  },
  compile: function(elem) {
    return function(ielem, $scope) {
      $compile(ielem)($scope);

    };

  }
};

}
]);

在var destInd = $scope.conf.heads.indexOf(targetElem.textContent);之后添加这两行if(destInd == -1) destInd = targetElem.cellIndex;，它应该可以工作