How to Do Drag and Drop?


#1

I’m building a first app with Iconic/Angular, trying to create an interface that lets the user drag and drop tile squares. I’ve tried a couple of angular-dragdrop libraries that I know work under other conditions, but I cannot get them to function at all in the Iconic context. Is there something in the environment that pre-traps the events that are captured by these libraries? Will it be possible to manage drag-and-drop somehow, either with those libraries or with something in Iconic?


#2

I’d also be very keen to know an answer to this…

@davidquinnjacobs have you taken a look through Ionics built in gesture support? Any help there?


#3

I experimented with the list reordering, but that will not work, at least in part because the whole object isn’t draggable without a separate handle, and will not behave as a square tile. As far as I can make out there are only two gesture methods, and it isn’t clear how they might be applied to particular tile divs. If I were able to apply them I’d probably have to write my own drag-and-drop.

The ionic framework seems pretty cool, and I can see where it would be useful in a number of applications. The dearth of information and lack of interest in this question, however, both make me nervous about continuing to use it for a game board based application. It is too much of a black box for me to determine why other angular drag-and-drop libraries will not function within its environment.


#4

Well, with some more blind experimentation I found that removing the ion-content div allows the drag-and-drop to work. I am using the one found here: http://ganarajpr.github.io/angular-dragdrop/.

I’ve now found that keeping the ion-content div works as long as the scroll and has-bounce are set to false.


#5

@davidquinnjacobs thanks for the link to the solution you found, I’m trying to implement it into my project and have a hard time doing this, could you maybe help me a little ?

I didn’t do much for now, just took the example with the colored squares and tried to put it in a page of my app. But it would not answer to touch events. It works on Chrome with the mouse, but not on Genymotion nor on my phone. How did you do it ?

HTML :

<div class="fixed-red-bg" ui-draggable="true" drag="1" drag-channel="A" drop-channel="A" ui-on-drop="onDrop(1, $data)" drop-validate="dropValidate(1, $data)">
</div>
&nbsp;
<div class="fixed-green-bg" ui-draggable="true" drag="2" drag-channel="A" drop-channel="A" ui-on-drop="onDrop(2, $data)" drop-validate="dropValidate(2, $data)">
</div>
&nbsp;
<div class="fixed-blue-bg" ui-draggable="true" drag="3" drag-channel="A" drop-channel="A" ui-on-drop="onDrop(3, $data)" drop-validate="dropValidate(3, $data)">
</div>

And controller :

$scope.onDrop = function(target, source){
    alert("dropped " + source + " on " + target);
};

$scope.dropValidate = function(target, source) {
    return target !== source;
};

Can’t do more simple, really !

Needless to say, I’m still a beginner with Angular, so I may miss something obvious.

Thank you very much for your help !


#6

I’m still a beginner with Angular and ionic, also!

I have been testing in Chrome and haven’t tried Android or iOS yet. I’ll give that a try and get back to you.

The only differences between the code you have and the code I’m using are (1) I’m not specifiying a channel, and (2) I’m using the on-drop-success call.

           <ul id="grid-container">
              <li class="grid-cell {{cell.color}} {{cell.shape}} {{cell.wordStatus}}"
                data-ng-repeat="cell in game.board.grid track by $index" data-ng-model="cell"
                data-ng-class="game.board.empty(cell)? 'empty':'filled'"
                ui-on-drop="game.board.dragDrop($event,$index,$data,game.board.LOC_GRID)"
                ui-draggable="{{!cell.locked}}"
                drop-validate="game.board.dragDropValidate($event,$index,cell,game.board.LOC_GRID)"
                on-drop-success="game.board.dragDropSuccess($event,$index,cell,game.board.LOC_GRID)"
                drag="cell"
                drag-hover-class="hover"
                    >
                {{cell.letter}}
            </li>
        </ul>

#7

I was able, finally, to get it running on Android and iOS and I found you were right about dNd not working on the latter. I found this shim, and it seems to be working.


#8

Very nice, thank you, I will give it a try !


#9

I am building an Ionic app with drag and drop and there is a good JS lib for drag and drop that has support for touch devices and Angular that I am planning to implement. http://rubaxa.github.io/Sortable/.

It needs the ng-sortable directive to work. So I am learning how to implement directives in Ionic now…


#10

I ditched the rubaxa sortable and instead went for this solution: http://www.scottlogic.com/blog/2014/11/25/ionic-sorter.html

It was very easy to implement, tough it has jQuery dependencies.

For now I have only tested it in chrome 39 (OS X) where it works!


#11

In the middle time I found out that Ionic Gestures was apparently enough for me, BTW :wink:


#12

@davidquinnjacobs

I have been working through the general drag and drop issues as well. I have had a lot of success with ngDraggable. It doesn’t have any dependency on jQuery and has been straight forward to extend. It also plays perfectly with the ionic gestures. In my code pen below I am using ionic and ngDraggable events concurrently.

Here is a code pen if you want to see an example of how it’s used here

I needed a couple things that were not built in yet, namely ng-force-touch, ng-touch-delay, ng-on-hover and ng-hover-id. my branch of the project is here base project is here


#13

Hi @jfspencer,

Thanks for the post. I had been waiting for this. :wink:


#14

elaborate the drag and drop remove the clone method i cant understand anybody clean the code for clear understanding.

how to add another slide in slide box drag the content remove the content on slidebox 1 show the slidebox 2.

help me it is helpful for beginners also

thanks in advance


#15

drag item not visible to user which item selected it shows to user.

http://codepen.io/jfspencer/pen/jEPGGm this example shows clear drag and drop item change color to red to green drag item i am tried alot help me

thanks in advance


#16

Hi anybody was successful with implementing Rubaxa Sortable (https://github.com/RubaXa/Sortable) into Ionic app? As davidquinnjacobs mentioned above it works for me only when ion-content doesn’t have scrolling (which I need it to have). Otherwise it’s the perfect drag & reorder plugin, so I really want to get it working (I need to reorder also - not just drag & drop).

Thanks for any tips and suggestions!


#17

the same question bothored me for weeks, until i noticed u mentioned to disable ion-content scrolling and has-bouncing, it works, thx.