在 AngularJS 应用程序中拖放的自定义指令

Question

我在 AngularJS 中编写了一个应用程序，我正在处理的一项要求是将元素从左侧拖放到右侧容器中。左侧的所有元素都可以很好地放置到右侧的容器中。但是当我单击 x 图标将它们移回左侧容器时，我只能移动蓝色的项目和绿色的项目（“手动干预”），我无法移回左侧容器。我已将ng-click 附加到a link 以触发一个函数来分离所有克隆的项目并移动未克隆的项目。我认为我的 js 中代码的这部分$rootScope.removeDraggedItem 在“手动干预”元素从左到右移动时无法正确绑定，并且无法执行该功能。

这是我的JSFiddle的链接。

这是我的代码：

HTML

<div class="panel panel-default" ng-app="app" ng-controller="appCtrl">
  <div class="panel-heading">Components configuration:</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-lg-3">
        <div class="jumbotron" style="min-height: 300px;">
          <div class="container">
            <div class="">
              <ul class="list-group" id="dropleft">
                <li class="ui-state-default drag-n-drop" drag-option="dropleft" ng-repeat="component in components">
                  <span class="label label-primary">{{component.name}} 
                                                <a href="#" ng-click="$root.removeDraggedItem($event)"><i style="color: white" class="fa fa-times hidden" aria-hidden="true"></i></a>
                                            </span>
                </li>
                <li class="ui-state-default drag-n-drop-clone" drag-option="clone" detach-element>
                  <span class="label label-success">Manual Intervention 
                                                <a href="#" ng-click="$root.removeDraggedItem($event)"><i style="color: white" class="fa fa-times hidden" aria-hidden="true"></i></a>
                                            </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="jumbotron sortable" id="dropright" style="min-height: 300px;">
        </div>
      </div>
    </div>
  </div>
</div>

JS代码：

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $rootScope) {
  $scope.title = "Test";
  $rootScope.removeDraggedItem = function($event) {
    var element = $(event.target).closest("li");
    console.log(element.attr("drag-option"));
    if (element.attr("drag-option") === "clone") {
      element.detach();
    } else {
      // Move to its original place
      console.log("No clone detected! Moving element to its original place...");
      var attrVal = element.attr("drag-option");
      $(element).find("i").addClass("hidden");
      $(element).detach().appendTo("#" + attrVal);
    }
  };
  $scope.components = [{
    "name": "Component App1"
  }, {
    "name": "Component App2"
  }, {
    "name": "Component App3"
  }, {
    "name": "Component SQL1"
  }, {
    "name": "Component SQL2"
  }];
});
app.directive('dragNDrop', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          revert: function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
              top: 0,
              left: 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
          }
        });
        $('#dropright').droppable({
          drop: function(event, ui) {
            $(this).find("li").find("i").removeClass("hidden");
          }
        });
      }
    }
  })
  .directive('detachElement', function() {
    return {
      restrict: 'AC',
      link: function($scope, element, attrs) {
        element.find("a").bind('click', function() {
          console.log("working now???");
        });
      }
    }
  })
  .directive('dragNDropClone', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          helper: 'clone',
          invert: false
        });
      }
    }
  })
  .directive('sortable', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.sortable({
          cursor: 'move',
          revert: true
        });
      }
    }
  });

CSS：

ul,
li {
  list-style-type: none;
}
/*
    Release Dashboard
*/
.dashboard-header {
    margin-top: 31px;
}

.release-action-btn {
    border-color: #fff;
}

.status-color-red {
    background-color: #d9534f;
    color: white;
}
.status-color-success {
    background-color: #5cb85c;
    color: white;
}
.status-color-new {
    background-color: #999999;
    color: white;
}
.status-color-inprogress {
    background-color: #337ab7;
    color: white;
}

.panel-default > .panel-heading, .table-header, .navbar-inverse {
    background-color: #164c9c !important;
    color: white;
}

更新：

通过将点击事件添加到 droppable 来解决问题。请参阅下面的代码。

$('#dropright').droppable({
                        drop: function (event, ui) {
                            $(this).find("li").find("i").removeClass("hidden");
                            if ($(this).find("li").attr("drag-option") === "clone")
                            {
                                console.log($(this).find("li").find("a"));
                                $(this).find("li").find("a").on('click', function (evt) {
                                    evt.preventDefault();
                                    $(this).closest("li").remove();
                                })
                            }
                        }
                    });

Answer 1

叉你小提琴。我在这段代码中发现了一个问题：

  $rootScope.removeDraggedItem = function($event) {
    var element = $(event.target).closest("li");
    console.log(element.attr("drag-option"));
    if (element.attr("drag-option") === "clone") {
      element.detach();
    } else {
      // Move to its original place
      console.log("No clone detected! Moving element to its original place...");
      var attrVal = element.attr("drag-option");
      $(element).find("i").addClass("hidden");
      $(element).detach().appendTo("#" + attrVal);
    }
  };

您将函数属性定义为$event，然后在函数内调用event。我使用了以下内容：

https://jsfiddle.net/Twisty/hd234vq8/

JavaScript

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $rootScope) {
  $scope.title = "Test";
  $rootScope.removeDraggedItem = function(event) {
    var element = $(event.target).closest("li");
    console.log(element.attr("drag-option"));
    if (element.attr("drag-option") === "clone") {
      element.detach();
    } else {
      // Move to its original place
      console.log("No clone detected! Moving element to its original place...");
      var attrVal = $("#" + element.attr("drag-option"));
      element.find("i").addClass("hidden");
      var attrPos = attrVal.position();
      element.css("position", "absolute");
      element.animate({
        //top: (attrPos.top + attrVal.find("li:last").height()),
        top: "-=250",
        left: attrPos.left
      }, function() {
        element.detach().appendTo(attrVal);
        element.attr("style", "").css("position", "relative");
      });
    }
  };
  $scope.components = [{
    "name": "Component App1"
  }, {
    "name": "Component App2"
  }, {
    "name": "Component App3"
  }, {
    "name": "Component SQL1"
  }, {
    "name": "Component SQL2"
  }];
});
app.directive('dragNDrop', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          revert: function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
              top: 0,
              left: 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
          }
        });
        $('#dropright').droppable({
          drop: function(event, ui) {
            $(this).find("li").find("i").removeClass("hidden");
          }
        });
      }
    }
  })
  .directive('detachElement', function() {
    return {
      restrict: 'AC',
      link: function($scope, element, attrs) {
        element.find("a").bind('click', function() {
          console.log("working now???");
        });
      }
    }
  })
  .directive('dragNDropClone', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          helper: 'clone',
          invert: false
        });
      }
    }
  })
  .directive('sortable', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.sortable({
          cursor: 'move',
          revert: true
        });
      }
    }
  });

如果用户将一个项目拖到另一个列表中，我喜欢为返回设置动画。您将在上面的代码中看到这一点。

更新

根据您的更新，我建议在 droppable 中执行以下操作：

$('#dropright').droppable({
  drop: function(event, ui) {
    var item = $(this).find("li");
    item.find("i").removeClass("hidden");
    if (item.attr("drag-option") === "clone") {
      console.log(item.find("a"));
      item.find("a").click(function(evt) {
        evt.preventDefault();
        item.remove();
      });
    }
  }
});

这将是确保事件绑定回调的好选择。您可以在此处使用.click()，因为您是直接分配它。如果您在元素存在之前分配它，您可以使用.on()。以太方式仍然可以工作。

我注意到的另一件事是，在#dropright 中，没有<ul> 元素。这不是问题，但它确实很奇怪。觉得值得一提。