Question

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

以下是指向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;
}

更新

通过将click事件添加到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>元素。这不是一个问题，但它确实遇到了奇怪的问题。觉得值得一提。

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

1 个答案: