Angular drag and drop with HTML5
Posted By : Monu Thakur | 30-Jun-2017
In this blog today we will describe how to drag the content from one list and drop to another list. We will include some angular directive in our module such as ui-draggable, ui-on-Drop. These directive is used to drag and drop the data from one list to another list. To include these angular directive we will install angular-native-dragdrop.To install below we mention the command to run in the root folder where project is placed.
Download the file angular-drag-and-drop-lists.js.
If you use bower or npm, just include the angular-drag-and-drop-lists package.
Add the dndLists module as a dependency to your angular app.
dnd-draggable directive
Use the dnd-draggable directive to make your element draggable
HTML Part
- {{item.label}}
Create mainController.js file.
angular.module('myApp').controller('mainController',function($scope,){
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
};
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});
}
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
Css part
.draggabledemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
.draggabledemo ul[dnd-list] .dndDraggingSource {
display: none;
}
.draggabledemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.draggabledemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
}
.simpleDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.