Does not work without ng-repeat

[urpro-bas]

It seems ngDraggable does not seem to work without ng-repeat, while I see not reason why it wouldn't. I have created a small example in js fiddle shows this.

http://jsfiddle.net/bjdscde1/

I created a single object that I want to drag called: lonelyDraggableObject. I copied the div from the example and bound it to the lonelyDraggableObject and it didn't work. But when I add ng-repeat="hack in [0]" it works. This does not really seem to make sense.

[belliAndrea]

+1

[epsyan]

++++1

[fatlinesofcode]

the uid variable introduced by @sh3rndon seems to prevent this as the drag element has the same scope.$id as the drop element. A simple workaround is if you add ng-if="true" to your drag element. @sh3rndon as able to shed any more light on why we need the uid ?

[sh3rndon]

Its been a while since I've worked with this library, but my code comment says that the 'uid' was added in order to recognize when an element is dropped onto itself. In my application the elements that are being dragged are also drop targets, and things got very sideways when an element was dropped onto itself.

[ariovistus]

wouldn't

var _myid = Math.random();

work just as well then?

[urpro-bas]

I don't think so, because as well the drag as the drop directive have got to have the same id, but I guess just creating a new scope in the directive will work. something that the workaround ng-if="true" would also do.

But couldn't we just compare the elements or add an id property to the element, or are there cases where the scope is the same but the element isn't and the dropping should be prevented?

[ariovistus]

yup, figured that out yesterday. adding an id property to the element seems to be working for me..

[urpro-bas]

ok nice, is there anyone who know's any downsides to to adding the id to the element instead of using the scope id?

[ariovistus]

though I suspect it won't work so well when the ng-drag is in a child element of the ng-drop element..

[urpro-bas]

But in most cases you would want a ng-drag to be a child of a ng-drop, usually there are multiple containers with ng-drop containing ng-drag element that can be switched between them. I we don;t want events if it's dropped on is container of origin we need another solution anyway since the scope.$id solution won't work when your ng-drag has its own scope (like we do in the workaround).

[sylvainbx]

+1000

[cihad]

+1

[gansky-alexander]

hello all have anyone PR for that issue?

I think problem i there:

 restrict: 'A',
                link: function (scope, element, attrs) {

                    scope.value = attrs.ngDrag;
                    var offset,_centerAnchor=false,_mx,_my,_tx,_ty,_mrx,_mry;
                    var _hasTouch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
                    var _pressEvents = 'touchstart mousedown';
                    var _moveEvents = 'touchmove mousemove';
                    var _releaseEvents = 'touchend mouseup';
                    var _dragHandle;

                    // to identify the element in order to prevent getting superflous events when a single element has both drag and drop directives on it.
                  var _myid = scope.$id; <----------- HERE
                    var _data = null;

                    var _dragOffset = null;

                    var _dragEnabled = false;

                    var _pressTimer = null;

for example i can add new parameter for directive, which will means id, if we will have if we use it, else we will use $id.

[gansky-alexander]

@fatlinesofcode can you help for that issue?

[gansky-alexander]

i have make PR for resolving this issue (it works for me) https://github.com/fatlinesofcode/ngDraggable/pull/236