如何创建angularjs简单的拖放 [英] How to Create simple drag and Drop in angularjs
问题描述
我想知道如何使用AngularJs做拖放。
I want to know how to do drag and drop by using 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>
<一个href=\"http://plnkr.co/edit/llTH9nRic3O2S7XMIi6y?p=$p$pview\">http://plnkr.co/edit/llTH9nRic3O2S7XMIi6y?p=$p$pview..
推荐答案
我只是张贴了这个对我崭新的品牌博客:
<一href=\"http://jasonturim.word$p$pss.com/2013/09/01/angularjs-drag-and-drop/\">http://jasonturim.word$p$pss.com/2013/09/01/angularjs-drag-and-drop/
I just posted this to my brand spanking new blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
code在这里:
https://github.com/logicbomb/lvlDragDrop
示范这里:<一href=\"http://logicbomb.github.io/ng-directives/drag-drop.html\">http://logicbomb.github.io/ng-directives/drag-drop.html
下面这些依靠UUID服务,我已经包括以下指令:
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.stopPropogation) {
e.stopPropogation(); // 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;
});
这篇关于如何创建angularjs简单的拖放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!