javascript - Angular Drag Drop between two table on 1000 records using directive

Question

Code is working but problem is that when i start dragging it take time for helper(clone) to appear

I have two table for include and exclude list, user can drag tr from include table to exclude and vice versa:

Directive code:

Draggble code:

.directive('ItemDraggable', function($timeout) {
    return {

        restrict:'A',
        link: function(scope, element, attrs) {    
        var sel=""
        angular.element(".up-table .tr-draggable").draggable({
            //scroll: true,
            helper:function(){
                return jQuery('<div class="up-helper-dragging close-hand"></div>').append("Move: "+jQuery(this).find(".up-username").text());
            },
            revert:"invalid"
        });               

        }
    };
});

Droppable Code:

.directive('ItemDroppable', function($compile,$filter) {
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
        var _copy = undefined;
        var _copy2 = undefined;
        var i = -1;
        var sel="tr."+attrs.custclass
        var droppableSelector=""
        if(sel.indexOf("include")!=-1)
        {
            droppableSelector=sel.replace("include","exclude")
        }else{
            droppableSelector=sel.replace("exclude","include")
        }
        droppableSelector=droppableSelector+"_droppable"
        if(element.hasClass("up-included-droppable")){
            console.log("included-droppable >>>>>>>",sel)

            angular.element(droppableSelector).droppable({
                activeClass: "up-active-droppable",
                tolerance: "touch",
                accept:sel,
                drop:function(event,ui) {

                }
            });
        }
        else if(element.hasClass("up-excluded-droppable")){
            console.log("excluded-droppable >>>>>>>>>> ",sel)

            angular.element(droppableSelector).droppable({
                activeClass: "up-active-droppable",                
                accept:sel,                    
                drop:function(event,ui) {


                }
            });
        }                       
        }
    };
});

Answer 1

在您的示例中，您每次都在用户开始拖动时创建新元素。当你有很多 DOM 节点时，它需要很长时间。尝试在所有操作之前为助手创建元素并显示/隐藏它。像这样：

.directive('ItemDraggable', function($timeout) {
  return {
    restrict:'A',
    link: function(scope, element, attrs) {    
      var sel="";
      var helper = jQuery('<div class="up-helper-dragging close-hand">Move: <span class="js-name"></span></div>').appendTo('body').hide();

      angular.element(".up-table .tr-draggable").draggable({
        helper:function(){
            return helper.find('.js-name').text(jQuery(this).find(".up-username").text()).end().show();
        },
        revert:"invalid"
    });               

    }
};

});