반응형
angularjs에서 간단한 드래그 앤 드롭을 작성하는 방법
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..
저는 방금 제 브랜드의 엉덩이를 때리는 새로운 블로그에 이 글을 올렸습니다.
코드명: 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 요소를 제공하지 않습니다.앵글의 목적은 그게 아니야그러나 드래그 앤 드롭을 제공하는 몇 가지 잘 알려진 지침이 있습니다.여기 제가 사용한 두 가지가 있습니다.
https://github.com/angular-ui/ui-sortable
https://github.com/codef0rmer/angular-dragdrop
파티에는 조금 늦었지만, 당신의 경우에 맞는 나만의 지시가 있습니다(자신이 직접 수정할 수 있습니다).이것은 DnD를 통한 목록 정렬을 위해 특별히 구축된 ng-repeat 디렉티브의 수정입니다.JQuery UI(다른 어떤 것보다 라이브러리가 적은 것을 선호한다)가 마음에 들지 않기 때문에, 저도 터치 스크린으로 작업하고 싶다고 생각하고 있습니다.
코드는 이쪽:http://codepen.io/SimeonC/pen/AJIyC
블로그 투고는 이쪽 http://sdevgame.wordpress.com/2013/08/27/angularjs-drag-n-drop-re-order-in-ngrepeat/
angular-drag-and-drop-lists 예제 페이지에서 수정됨
마크업
<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>
각진
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을 통해 설치할 수 있습니다.각 드래그 앤 드롭 리스트
adapt-strap에는 이를 위한 매우 가벼운 모듈이 있습니다.여기 바이올린이 있다.지원되는 Atribute를 다음에 나타냅니다.더 있어요.
ad-drag="true"
ad-drag-data="car"
ad-drag-begin="onDragStart($data, $dragElement, $event);"
ad-drag-end="onDataEnd($data, $dragElement, $event);"
각도별로 드래그 앤 드롭하기 위한 작은 스크립트
(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);
HTML 5 드래그 앤 드롭 사용
HTML 5 드래그 앤 드롭 기능과 각도 지시어를 사용하여 쉽게 아카이브할 수 있습니다.
- 끌기 가능 = true를 설정하여 끌기를 활성화합니다.
- 상위 컨테이너 및 하위 항목에 대한 지시문을 추가합니다.
- 끌어서 놓기 기능(부모의 경우 'ondragstart', 자녀의 경우 'ondrop')을 재정의합니다.
다음 예제를 참조해 주세요.list는 항목의 배열입니다.
HTML 코드:
<div class="item_content" ng-repeat="item in list" draggrble-container>
<div class="item" draggable-item draggable="true">{{item}}</div>
</div>
Javascript:
module.directive("draggableItem",function(){
return {
link:function(scope,elem,attr){
elem[0].ondragstart = function(event){
scope.$parent.selectedItem = scope.item;
};
}
};
});
module.directive("draggrbleContainer",function(){
return {
link:function(scope,elem,attr){
elem[0].ondrop = function(event){
event.preventDefault();
let selectedIndex = scope.list.indexOf(scope.$parent.selectedItem);
let newPosition = scope.list.indexOf(scope.item);
scope.$parent.list.splice(selectedIndex,1);
scope.$parent.list.splice(newPosition,0,scope.$parent.selectedItem);
scope.$apply();
};
elem[0].ondragover = function(event){
event.preventDefault();
};
}
};
});
자세한 코드는 이쪽 https://github.com/raghavendrarai/SimpleDragAndDrop에서 확인하실 수 있습니다.
언급URL : https://stackoverflow.com/questions/18555429/how-to-create-simple-drag-and-drop-in-angularjs
반응형
'programing' 카테고리의 다른 글
| angular에서 module.config(configFn)에 의존관계를 주입하는 방법 (0) | 2023.02.22 |
|---|---|
| javascript를 사용하여 리디렉션하지 않고 URL 변경 (0) | 2023.02.22 |
| woocommerce - 카트 항목 수량을 프로그래밍 방식으로 업데이트합니다. (0) | 2023.02.22 |
| 클래스 상수를 구현하는 방법 (0) | 2023.02.22 |
| 반응 시 svg 이미지에 색상을 추가하는 방법 (0) | 2023.02.18 |