Javascript 简单角度拖动&；滴液

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

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

{{item}

使用jQuery Ui和角度拖动：

<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>

演示：

---

角度拖动：

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

在测试了大量库之后，我发现这很有趣。至少，它符合我的需要，非常易于配置，并且具有非常小的包大小（~6K）

在两个列表之间拖放。


{{man}}




{{女人}

---

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

您试过了吗？我不确定它是否适合您的需要，但它支持在不同的应用程序之间移动元素lists@Jason它需要包含JQueryUI。添加ondragstart和ondrop事件以传递值非常容易。为什么不直接编码呢？@晚安，这是真的，但这只是一个额外的库，你可以创建一个jQueryUI的精简版本，只获取你需要的元素。但您只需要两个三行函数就可以将数据从拖放源传递到拖放源。你的电话；-）您也可以在html或模板中绑定这些函数。

<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>

<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);
  };
});

<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>