1
c0deformer의 jQuery UI 구현을 사용하여 드래그 앤 드롭을 구현하려고합니다 (여기를 참조하십시오 : http://codef0rmer.github.io/angular-dragdrop/#/ 참조). 드래깅 부분은 잘 작동하지만 이후의 기능을 사용할 수없는 것 같습니다. 하락. 이 응용 프로그램에서는 대상 div 내에서 드래그 가능한 항목을 드롭 할 수 있기를 원합니다. 즉, 대상 범위를 목록 유형 구조 (또는 반복되는 div 집합)로 제한하고 싶지는 않습니다. 주로 사용자가 항목을 즉시 드래그하여 사용자가 몇 개의 항목을 끌어서 놓기로 미리 알 수있는 방법이 없기 때문입니다.AngularJS에서 드래그 앤 드롭
나는 웹을 훑어보고 한 목록에서 다른 목록으로 효과적으로 끌지 않고 끌어 놓기를 사용하는 Angular 예제를 찾을 수 없습니다. 이 작업을 수행 할 수 있습니까? 그렇다면 항목을 드래그 한 후 범위를 적절히 업데이트하는 방법을 잘 모르겠습니다. 아래의 예제 코드에서, 드롭 된 항목은 두 번째 목록의 범위로 푸시되고 새 범위가 적용됩니다. 이상적으로, 드롭 된 항목의 범위는 위에서 언급 한 대상 div입니다. 나는 Angular에서 정말 새로운 것이므로 어떤 조언도 대단히 감사합니다. c0deformer에서
니펫 :
app.directive('droppable', function($compile) {
return {
restrict: 'A',
link: function(scope,element,attrs){
//This makes an element Droppable
element.droppable({
drop:function(event,ui) {
var dragIndex = angular.element(ui.draggable).data('index'),
dragEl = angular.element(ui.draggable).parent(),
dropEl = angular.element(this);
console.log(dropEl);
if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
scope.list2.push(scope.list1[dragIndex]);
scope.list1.splice(dragIndex, 1);
} else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
scope.list1.push(scope.list2[dragIndex]);
scope.list2.splice(dragIndex, 1);
}
scope.$apply();
}
});
}
};
});
당신은 당신 드래그로 원하는 요소에 드래그 지시어 및 낙하 할 수 원하는 요소에 낙하 할 지시문을 넣어해야합니다. 그들이 어떤 요소인지는 중요하지 않습니다. 정확히 무엇을하고 싶은가요? 요소를 드래그하면됩니까? – pasine
@notme - 하나의 타겟 div (하나의 div 당 하나의 div가 아닌) 내에 모두 드롭 할 수있는 여러 개의 드래그 가능한 요소 (목록에 있음)가 있습니다. 붙여 넣은 코드에서 작동하도록 할 수 없었습니다. –
코드를 더 추가 할 수 있습니까? 작동하지 않는 코드로 jsfiddle/plunker를 만들 수 있습니까? – pasine