简单的AngularJS拖放解决方案答案

【问题标题】：Simple AngularJS drag & drop solution简单的AngularJS拖放解决方案
【发布时间】：2014-08-13 23:36:01
【问题描述】：

有些解决方案需要包含数百个库，这显然不能令人满意。我知道有很多关于拖放的问题，但是我的要求与以前的问题不同并且要求要低得多。我所需要的只是能够拖放项目，并以某种方式获取对这两个项目的引用，因此我可以自己进行交换（更改项目之间的值）。所以我想，这需要更小的库，或者更简单的解决方案..？

<ul>
    <li sortable ng-repeat="item in items">{{item}} <i id="draggableIcon"></i></li>
</ul>

【问题讨论】：

你试过ui-sortable吗？我不确定它是否符合您的需求，但它支持在不同列表之间移动元素
@Jason 需要包含 JQueryUI
添加 ondragstart 和 ondrop 事件以传递您的值非常容易。为什么不直接编码呢？
@good_evening 确实如此，但它只是一个额外的库，您可以创建一个精简的 jQueryUI 构建来只获取您需要的元素
好的。但是您只需要两个三行函数即可将数据从拖动源传递到放置源。你的电话;-)

标签： javascript html angularjs drag-and-drop

【解决方案1】：

// just some old fashioned java-script to drop data from one element to another!

sourceElement.ondragstart = function(ev) {

      var datastr = "" // pass an object id, or an object as json what ever you need
      ev.dataTransfer.setData("Text", datastr);
}
// Allow drops to your target
targetElement.ondragover = function(ev) {
      ev.preventDefault();
}

targetElement.ondrop = function(ev) {
      ev.preventDefault();
      datastr = ev.dataTransfer.getData("Text"));
      // do something cool here with that data!
}

【讨论】：

你也可以在你的html或者模板中绑定这些函数。

【解决方案2】：

使用 jQuery Ui 和 Angular-dragdrop：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="js/angular-dragdrop.min.js" type='text/javascript"></script>

下载 angular-dragdrop.min.js 文件@ https://github.com/codef0rmer/angular-dragdrop/blob/master/src/angular-dragdrop.min.js

可拖动：

<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>

可丢弃：

<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'><div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div>

你的控制器应该是这样的：

var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('OverviewCtrl', function($scope) {
  $scope.list1 = {title: 'AngularJS - Drag Me'};
  $scope.list2 = {};

  $scope.startCallback = function(event, ui, title) {
    console.log('You started draggin: ' + title.title);
    $scope.draggedTitle = title.title;
  };

  $scope.stopCallback = function(event, ui) {
    console.log('Why did you stop draggin me?');
  };

  $scope.dragCallback = function(event, ui) {
    console.log('hey, look I`m flying');
  };

  $scope.dropCallback = function(event, ui) {
    console.log('hey, you dumped me :-(' , $scope.draggedTitle);
  };
});

演示：http://codef0rmer.github.io/angular-dragdrop/

角度拖放：https://github.com/codef0rmer/angular-dragdrop

【讨论】：

【解决方案3】：

我正在寻找一个简单的解决方案，没有 JQuery/JQueryUI 依赖项。

在测试了一堆库之后，我发现angular-dragdrop 很有趣。至少，它符合我的需求，非常易于配置，而且封装尺寸非常小（~6K）。

<div class="container" ng-controller="MainCtrl">
    <div class="row topRow">
        <h4 class="heading">
            Drag and drop between the two lists.
        </h4>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <ul ui-on-Drop="onDrop($event,$data,men)">
                <li ui-draggable="true" drag="man" 
                on-drop-success="dropSuccessHandler($event,$index,men)"
                ng-repeat="man in men track by $index">
                    {{man}}
                </li>
            </ul>
        </div>
        <div class="col-xs-6">
            <ul ui-on-Drop="onDrop($event,$data,women)">
                <li ui-draggable="true" drag="woman" 
                on-drop-success="dropSuccessHandler($event,$index,women)"
                ng-repeat="woman in women track by $index">
                    {{woman}}
                </li>
            </ul>
        </div>
    </div>
</div>

唯一的缺点是糟糕的文档。但是，即使这样，它也很容易运行。

【讨论】：