如何在 angularjs 中创建简单的拖放
[英] How to Create simple drag and Drop in angularjs
本文介绍了如何在 angularjs 中创建简单的拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何使用 AngularJs 进行拖放操作.
这是我目前所拥有的:
<span><input type="checkbox" ng-model="master"><span>SelectAll</span></span><div ng-repeat="待办事项中的待办事项"><div ng-hide="启用编辑器"><a href="#">拖动</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)">编辑</a>
<div ng-show="启用编辑器"><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)">保存</a><a href="#" ng-click="cancelTask(todo.task_id,todo.task_name,editMode=!editMode)">取消</a>
http://plnkr.co/edit/llTH9nRic3O2S7XMIi6y?p=preview..
解决方案
我刚刚将这个发布到我的品牌打屁股新博客:http://jasonturim.wordpress.com/2013/09/01/angularjs-拖放/
代码在这里: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) {返回 {限制:'A'，链接:功能(范围，EL，属性，控制器){console.log("链接可拖动元素");angular.element(el).attr("draggable", "true");var id = attrs.id;如果(！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) {返回 {限制:'A'，范围: {onDrop: '&'},链接:功能(范围，EL，属性，控制器){var id = attrs.id;如果(！attrs.id){id = uuid.new()angular.element(el).attr("id", id);}el.bind("拖动", 函数(e) {如果(e.preventDefault){e.preventDefault();//必要的.允许我们下降.}e.dataTransfer.dropEffect = '移动';//请参阅有关 DataTransfer 对象的部分.返回假；});el.bind("dragenter", function(e) {//this/e.target 是当前的悬停目标.angular.element(e.target).addClass('lvl-over');});el.bind("dragleave", function(e) {angular.element(e.target).removeClass('lvl-over');//this/e.target 是前一个目标元素.});el.bind("drop", function(e) {如果(e.preventDefault){e.preventDefault();//必要的.让我们放下.}如果(e.stopPropagation){e.stopPropagation();//必要的.让我们放下.}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 服务
角度.module('lvl.services',[]).factory('uuid', function() {var svc = {新:函数(){函数_p8(s) {var p = (Math.random().toString(16)+"000000000").substr(2,8);返回 ?"-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;}返回 _p8() + _p8(true) + _p8(true) + _p8();},空:函数(){返回'00000000-0000-0000-0000-000000000000'；}};返回 svc；});
I want to know how to do drag and drop by using AngularJs.
This is what I have so far:
<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..
解决方案
I just posted this to my brand spanking new blog:
http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
Code here:
https://github.com/logicbomb/lvlDragDrop
Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html
Here are the directives these rely on a UUID service which I've included below:
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 service
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;
});
这篇关于如何在 angularjs 中创建简单的拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
