I am using drag and drop library in Angular JS from the below link, its working perfectly because it doesn't have id in the div.
https://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
I am using HTML 5 drag and drop functionality but the problem I am facing to generate dynamic id of each via Angular J S. I have tried ng-attr-id and id both but I am not able to fetch the id of my element via angular.element(element l).a t tr("id").
Working Code
------------
HTML:
<div ng-controller="myCtl" style="margin-top :50 p x;">
<div class="row">
<div class="col-m d-1 col-m d-offset-1">
<p>Click and drag a color onto the grid to the right</p>
<div class="peg green" x-l v l-drag gable="true" data-color="green">Green</div>
<div class="peg red" x-l v l-drag gable="true" data-color="red">Red</div>
<div class="peg blue" x-l v l-drag gable="true" data-color="blue">Blue</div>
<div class="peg black" x-l v l-drag gable="true" data-color="black">Black</div>
<div class="peg grey" x-l v l-drag gable="true" data-color="grey">Grey</div>
</div>
<div class="col-m d-10">
<div n g-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
<span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-l v l-drop-target="true" x-on-drop="dropped(drag E l, drop E l)"></span>
</div>
</div>
</div>
</div>
Controller( between the modal and view for drag and drop):
angular.module('my App', ['l v l. directives .drag drop'])
.controller('myCtl', ['$scope', function($scope) {
$scope.dropped = function(dragEl, dropEl) {
// this is your application logic, do whatever makes sense
var drag = angular.element(dragEl);
var drop = angular.element(dropEl);
console.log("The element " + drag.attr('id') + " has been dropped on " + drop.attr("id") + "!");
};
}]);
Modal(fetch the id of the dragged object ):
angular.element(element).at tr("id");
Not Working Code
----------------
HTML:
<div ng-controller="dd Controller" style="margin-top :50 p x;">
<div class="row">
<div class="col-m d-1 col-m d-offset-1">
<p>Click and drag a color onto the grid to the right</p>
<div ng-repeat="list in List">
<div id={{list.Name}} class="item" x-lvl-drag gable="true">{{list.Name}}</div>
</div>
</div>
<div class="col-m d-10">
<div n g-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
<span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-l v l-drop-target="true" x-on-drop="dropped(drag E l, drop E l)"></span>
</div>
</div>
</div>
</div>
Controller( between the modal and view for drag and drop):
angular.module('my App', ['l v l. directives .drag drop'])
.controller('my C t l', ['$scope', function($scope) {
$scope.dropped = function(drag E l, drop E l) {
// this is your application logic, do whatever makes sense
var drag = angular.element(drag E l);
var drop = angular.element(drop E l);
console.log("The element " + drag. at tr('id') + " has been dropped on " + drop .at tr("id") + "!");
};
}]);
Modal(fetch the id of the dragged object ):
angular.element(element).at tr("id");
Access to the attributes in the "lvl-drag-drop.js" file is incorrect, if you are using a directive, you can access the attributes in the third argument.
link: function (scope, el, attrs, controller)
See the comments in this example:
module.directive('lvlDraggable', ['$rootScope', 'uuid', function($rootScope, uuid) {
return {
restrict: 'A',
link: function(scope, el, attrs, controller) {
//angular.element is no longer necessary if it refers to the element.
el.attr("draggable", "true");
//Incorrect
var id = angular.element(el).attr("id");
//This is correct
var id = attrs.id;
if (!id) {
id = uuid.new();
el.attr("id", id); //Also here
}
//.. more ...
}
}
}]);