如何在angularjs中创build简单的拖放操作
我想知道如何使用AngularJs进行拖放操作。
这是我迄今为止：
<span><input type="checkbox" ng-model="master"><span>SelectAll</span></span> <div ng-repeat="todo in todos"> <div ng-hide="enableEditor"> <a href="#">Drag</a> <input id="checkSlave" type="checkbox" ng-checked="master" ng-model="todo.done"> <span ng-if="checked" ng-show="removed" ng-bind="todo.task_name" class="removed"></span> <span ng-bind="todo.task_name"></span> <span ng-bind="todo.state"></span> <a href="#" ng-click="editTask(todo.task_id,todo.task_name,editMode=!editMode)">Edit</a> </div> </div> <div ng-show="enableEditor"> <input type="text" ng-show="editMode" ng-model="todo.task_name" ng-change="update(todo.task_id,todo.task_name)"> <a href="#" ng-click="saveTask(todo.task_id,todo.task_name,editMode=!editMode)">Save</a> <a href="#" ng-click="cancelTask(todo.task_id,todo.task_name,editMode=!editMode)">Cancel</a> </div> </div> http://plnkr.co/edit/llTH9nRic3O2S7XMIi6y?p=preview ..
我只是把这张贴到我的品牌打新的博客： http : //jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
代码在这里： https ： //github.com/logicbomb/lvlDragDrop
在这里演示： http : //logicbomb.github.io/ng-directives/drag-drop.html
以下是这些依赖UUID服务的指令，我已经在下面列出了：
var module = angular.module("lvl.directives.dragdrop", ['lvl.services']); module.directive('lvlDraggable', ['$rootScope', 'uuid', function($rootScope, uuid) { return { restrict: 'A', link: function(scope, el, attrs, controller) { console.log("linking draggable element"); angular.element(el).attr("draggable", "true"); var id = attrs.id; if (!attrs.id) { id = uuid.new() angular.element(el).attr("id", id); } el.bind("dragstart", function(e) { e.dataTransfer.setData('text', id); $rootScope.$emit("LVL-DRAG-START"); }); el.bind("dragend", function(e) { $rootScope.$emit("LVL-DRAG-END"); }); } } }]); module.directive('lvlDropTarget', ['$rootScope', 'uuid', function($rootScope, uuid) { return { restrict: 'A', scope: { onDrop: '&' }, link: function(scope, el, attrs, controller) { var id = attrs.id; if (!attrs.id) { id = uuid.new() angular.element(el).attr("id", id); } el.bind("dragover", function(e) { if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. return false; }); el.bind("dragenter", function(e) { // this / e.target is the current hover target. angular.element(e.target).addClass('lvl-over'); }); el.bind("dragleave", function(e) { angular.element(e.target).removeClass('lvl-over'); // this / e.target is previous target element. }); el.bind("drop", function(e) { if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } if (e.stopPropagation) { e.stopPropagation(); // Necessary. Allows us to drop. } var data = e.dataTransfer.getData("text"); var dest = document.getElementById(id); var src = document.getElementById(data); scope.onDrop({dragEl: src, dropEl: dest}); }); $rootScope.$on("LVL-DRAG-START", function() { var el = document.getElementById(id); angular.element(el).addClass("lvl-target"); }); $rootScope.$on("LVL-DRAG-END", function() { var el = document.getElementById(id); angular.element(el).removeClass("lvl-target"); angular.element(el).removeClass("lvl-over"); }); } } }]);
UUID服务
angular .module('lvl.services',[]) .factory('uuid', function() { var svc = { new: function() { function _p8(s) { var p = (Math.random().toString(16)+"000000000").substr(2,8); return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ; } return _p8() + _p8(true) + _p8(true) + _p8(); }, empty: function() { return '00000000-0000-0000-0000-000000000000'; } }; return svc; });
Angular不提供拖放等时髦的UI元素。 这不是Angular的目的。 但是，有一些众所周知的指令可以提供拖放function。 这是我用过的两个。
我晚了一点，但我有我自己的指令，看起来会适合你的情况（你可以自己调整）。 这是ng-repeat指令的一个修改，专门为通过DnD重新排列列表而修改。 我build立了它，因为我不喜欢JQuery UI（比其他任何东西都更喜欢使用更less的库），我也希望我也能在触摸屏上工作）。
代码在这里： http : //codepen.io/SimeonC/pen/AJIyC
博客文章在这里： http : //sdevgame.wordpress.com/2013/08/27/angularjs-drag-n-drop-re-order-in-ngrepeat/
从angular度拖放列表 示例页面修改
标记
<div class="row"> <div ng-repeat="(listName, list) in models.lists" class="col-md-6"> <ul dnd-list="list"> <li ng-repeat="item in list" dnd-draggable="item" dnd-moved="list.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" draggable="true">{{item.label}}</li> </ul> </div> </div>
angular
var app = angular.module('angular-starter', [ 'ui.router', 'dndLists' ]); app.controller('MainCtrl', function($scope){ $scope.models = { selected: null, lists: {"A": [], "B": []} }; // Generate initial model for (var i = 1; i <= 3; ++i) { $scope.models.lists.A.push({label: "Item A" + i}); $scope.models.lists.B.push({label: "Item B" + i}); } // Model to JSON for demo purpose $scope.$watch('models', function(model) { $scope.modelAsJson = angular.toJson(model, true); }, true); });
库可以通过bower或者npm： angular-drag-and-drop-lists来安装
适配带具有非常轻的重量模块。 这里是小提琴 。 以下是一些支持的属性。 还有更多。
ad-drag="true" ad-drag-data="car" ad-drag-begin="onDragStart($data, $dragElement, $event);" ad-drag-end="onDataEnd($data, $dragElement, $event);"
小angular度拖放的脚本
(function(angular) { 'use strict'; angular.module('drag', []). directive('draggable', function($document) { return function(scope, element, attr) { var startX = 0, startY = 0, x = 0, y = 0; element.css({ position: 'relative', border: '1px solid red', backgroundColor: 'lightgrey', cursor: 'pointer', display: 'block', width: '65px' }); element.on('mousedown', function(event) { // Prevent default dragging of selected content event.preventDefault(); startX = event.screenX - x; startY = event.screenY - y; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); }); function mousemove(event) { y = event.screenY - startY; x = event.screenX - startX; element.css({ top: y + 'px', left: x + 'px' }); } function mouseup() { $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); } }; }); })(window.angular);
源链接
