Question

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

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

Answer 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!
}

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

Angular-dragdrop：https://github.com/codef0rmer/angular-dragdrop

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

唯一的缺点是文档很差。但是，即便如此，也很容易让它运行起来。

简单的AngularJS拖动;掉落解决方案

3 个答案: