logicbomb/lvldragdrop

Native AngularJS drag and drop directive

#Native AngularJs drag and drop directive#

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.

Live Demo

Documentation

##UUID Service## A very simple service for working with UUIDs.

Live Demo

Documentation

dataTransfer hack

The jQuery event object does not have a dataTransfer property... true, but one can try:

jQuery.event.props.push('dataTransfer');

lvldragdrop's Issues

Reorder elements in the same Dropped area.

I'm using the directive to move elements from one table to the other, at the same time I want to re-order (move up and down) the elements (in the same table) using this directive. Anyone can help me on how to achieve the goal?

Problem with Jquery

Hi,

there seem to be problems when jquery is in the same project.

Here a plunkr: http://plnkr.co/edit/e59nazSpdaRxuyAqM0BO?p=preview

 Uncaught TypeError: Cannot call method 'setData' of undefined lvl-drag-drop.js:19
 Uncaught TypeError: Cannot set property 'dropEffect' of undefined lvl-drag-drop.js:51
 Uncaught TypeError: Cannot call method 'getData' of undefined lvl-drag-drop.js:74

I will try to find out what this might be.
I guess jQuery is important enough - even with angular - that there should be a way to get you script play nicely with jQuery

AngularJS 1.3 support

AngularJS is now giving this error: "Referencing DOM nodes in Angular expressions is disallowed!", because of this: on-drop="controller.dropped(dragEl, dropEl)".

Is there a quick fix for this?

Colossal Memory Leak

Hi

In a frequent timer updating the scope with the drag / drops inside a ng-repeat I managed to get 4GB after just 2 mins. Beta that!! :)

lvlDropTarget needs:

scope.$on('$destroy', function() {
drag_start_event();
drag_end_event();
});

with:

var drag_start_event = $rootScope.$on("LVL-DRAG-START", function() {

and

var drag_end_event = $rootScope.$on("LVL-DRAG-END", function() {

I'm not tested it but I think you can also change $rootScope to $scope for those listeners

Either way you end up with huge memory build up with all those listeners on the rootScope unless addresses with one or the other solution.

That's my sight noob Angular take on it anyway.

Nige
PS: Thanks for the code, I hacked it to cope with dragable child elements inside a dropable one.

how to make the input and textarea draggable

I am trying to add the textarea and input draggable,

I make the javascript like this:

    $scope.dropped = (dragEl, dropEl) ->
            drag = angular.element(dragEl)
            drop = angular.element(dropEl)
            initial = drop[0].innerHTML

    # console.log("The element " + drag.attr('id') + " has been dropped on " + drop.attr('id') + "!")

    drop[0].innerHTML = drag[0].innerHTML
    drag[0].innerHTML = initial

    console.log(drag[0].innerHTML)
    console.log(drop[0].innerHTML)
    console.log(drop)
    return true

but seems, textarea and input does not support to find innerhtml, how should I do?

Thanks!

http://errors.angularjs.org/1.4.5/$parse/isecdom?p0=onDrop(dragEl%2CdropEl%2Cevent)

While using Angularjs 1.4.5, I am getting this error.

http://errors.angularjs.org/1.4.5/$parse/isecdom?p0=onDrop(dragEl%2CdropEl%2Cevent)

For older versions it worked fine.

AngularJs make an element draggable or droppable dynamically in DOM

Great work, thanks logicbomb.

Actually i am looking for any directive or anything that works with angularJs to make an element draggable or droppable dynamically in DOM.

Like there is an element in DOM which is draggable, i want to make it droppable and disable its draggable properties.

I tried it with firebug by removing it all draggable attributes, but i does not work. Can we do this?

Uncaught TypeError: Cannot read property 'dataTransfer' of undefined

Hi, i have this error in Chrome.
Can u help me?

Mobile support?

bower repository not found error

When I try to install lvlDragDrop via bower, I get an error that says repository not found. Did you changed your repository name or account?

> bower info lvlDragDrop
bower not-cached    git://github.com/reykjavik-university/lvlDragDrop.git#*
bower resolve       git://github.com/reykjavik-university/lvlDragDrop.git#*
bower ECMDERR       Failed to execute "git ls-remote --tags --heads git://github.com/reykjavik-university/lvlDragDrop.git", exit code of #128 fatal: remote error:    Repository not found.

dataTransfer not supported the same way on all browsers

I keep getting the error as shown in the screenshot. The error I reckon is as per this Stackoverflow thread

Uncaught TypeError: Cannot call method 'setData' of undefined 

Registered as a bower component

I noticed the project doesn't have a bower.json file, which is necessary in order to install it via bower. I've forked the project and created such a file in that repo, and I can create a pull request if you would like to add that file to this project.

UUID doesn't changed on element if filtered list

ups sry my fail..its working now 👍

Can not change $scope inside drop callback

angular.module('MyApp', ['lvl.directives.dragdrop'])
.controller('MyController', function ($scope) {
  $scope.fieldDropped = function (dragEl, dropEl) {
    $scope.shouldBeChanged = 'but not';
  };
});

jQuery has dataTransfer in event.originalEvent

At http://api.jquery.com/category/events/event-object/ it reads

Certain events may have properties specific to them. Those can be accessed as properties of the event.originalEvent object.

Using this would be an improvement to this directive.

Need IE9 support

Can you implement IE9 support?

Minor bug in documentation, demo code doesn't work

Hi,

thanks for that nice module.

In the documentation: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
At the HTML snippet there is a small error, so the demo doesn't work.

Line 24:

 <div x-lvl-drop-target='true' x-lvl-on-drop='dropped(dragEl, dropEl)'>drop zone</div>

x-lvl-on-drop has to be x-on-drop

Thanks for sharing!
I will play around a bit with it and if there is something you could/shoud improve I will let you know.