Skip to content

Add more information to drop process to be used in callback function. #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rburone wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Add more information to drop process to be used in callback function. #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bb8febf
lvl-drag-drop returning ids + pressed keys.
rburone Aug 20, 2015
e004b87
Update README.md
rburone Aug 20, 2015
0a0cdf4
Update README.md
rburone Aug 20, 2015
77f2f29
Add fromEl argument to the callback function
rburone Aug 24, 2015
249508c
Update README.md
rburone Aug 24, 2015
eeeea51
Clean up the formatting.
rburone Sep 1, 2015
9ce3944
Code FIX.
rburone Sep 1, 2015
531e168
Clean up the formatting. (+2 squashed commit)
rburone Aug 20, 2015
0acb8f9
Merge branch 'master' of https://github.com/rburone/lvlDragDrop
rburone Sep 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,28 @@

An easy to use, native, directive to enable drag/drop in your angular app. This directive has no dependency on jQuery or other frameworks, it does require a browser that supports the HTML5 drag/drop events.

Now combine keys (ctrl, alt, shift) with the drag and drop.

<div x-on-drop='dropped(dragEl, dropEl, keysPressed)'>dragme</div>
...
$scope.dropped(dragEl, dropEl, keysPressed) {
// check for ctrl key
if (keysPressed.ctrl) {
// drag with control key.
}
}

Get the FROM element of a drag element.

<div x-on-drop='dropped(dragEl, dropEl, keysPressed, fromEl)'>dragme</div>
...
$scope.dropped(dragEl, dropEl, keysPressed, fromEl) {
// parent element before do drag and drop
console.log("I was dragged from "+fromEl+" element.");

}
}

[Live Demo](http://logicbomb.github.io/ng-directives/drag-drop.html)

[Documentation](http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/)
Expand Down
13 changes: 12 additions & 1 deletion script/lvl-drag-drop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ module.directive('lvlDraggable', ['$rootScope', 'uuid', function ($rootScope, uu
link: function (scope, el, attrs, controller) {
angular.element(el).attr("draggable", "true");

var fromID = angular.element(el[0].parentNode).attr('id');

if (!fromID) {
fromID = uuid.new();
angular.element(el[0].parentNode).attr('id', fromID);
}

var id = angular.element(el).attr("id");

if (!id) {
Expand All @@ -15,6 +22,7 @@ module.directive('lvlDraggable', ['$rootScope', 'uuid', function ($rootScope, uu
console.log(id);
el.bind("dragstart", function (e) {
e.dataTransfer.setData('text', id);
e.dataTransfer.setData('from', fromID);
console.log('drag');
$rootScope.$emit("LVL-DRAG-START");
});
Expand Down Expand Up @@ -66,10 +74,13 @@ module.directive('lvlDropTarget', ['$rootScope', 'uuid', function ($rootScope, u
e.stopPropagation(); // Necessary. Allows us to drop.
}
var data = e.dataTransfer.getData("text");
var from = e.dataTransfer.getData("from");
var dest = document.getElementById(id);
var src = document.getElementById(data);

scope.onDrop({dragEl: data, dropEl: id});
var keys = {'ctrl': e.ctrlKey, 'alt' : e.altKey, 'shift' : e.shiftKey}; // register the keys was pressed during the drag and drop

scope.onDrop({dragEl: data, dropEl: id, keysPressed: keys, fromEl: from});
});

$rootScope.$on("LVL-DRAG-START", function () {
Expand Down