Drag and drop in onsen

[shweta]

Can we do drag and drop ons-list in onsen ui. Please help

[munsterlander]

@shweta Yes you can, but not built-in as you will need custom code.

https://github.com/munsterlander/Onsen-Examples/blob/master/Draggable-Items/readme.md

[shweta]

@munsterlander said:

es you can, but not built-in as you will need custom code.

Thanks @munsterlander Can i have live example of it.

[munsterlander]

@shweta Here is a down and dirty example of drag and drop. https://codepen.io/munsterlander/pen/JWrWXN

Using the functions you can detect where it was dropped. What exactly are you trying to do and maybe I can cobble up something?

[shweta]

@munsterlander said:

What exactly are you trying to

I am creating a stock market app using onsen ui. Where i have many small divs of different fields. So that i am using ons-list for this. I want to add drag and drop feature where user can drag any list window and drop.

Below is link where I have uploaded my code. please check and revert.

I have add your code in My Top 5 Performing Stocks List.

http://millicenttechnologies.in/shweta/onsenui/www/index.html

[munsterlander]

@shweta Ok, so what tab would you be doing this feature on? Also, so you will have a list and what/where would the user drop it? Lastly, since you are using the splitter with the menu, you will have to implement the full github code so you can override the menu when the user drags. This is all do-able, but you are definitely getting into the inner functions of Onsen and HammerJS.

[shweta]

Basically i want to give a control to user to change the sequence of list. SO he change the placement of list according to him at top or bottom.

[munsterlander]

@shweta @Fran-Diox found a solution using the Sortable.JS library. He posted an example here: https://codepen.io/frankdiox/pen/pepVZX This is a very slick implementation.

[shweta]

Thanks @munsterlander I have also come out with the same solution. But now its giving me problem in mobile. Because I have full screen data list. drag and drop functionality working fine but this doesn’t allow me to scroll the page.

[munsterlander]

@shweta Right and welcome to conflicting drag and drop events! I wrote about that here and I definitely need to do a better job explaining it, but if you look in the code, you will see that you have to disable the body’s (my example was the menu but same thing) gesturedetector in order to get drag and drop THEN after your user is done with that, you will need to re-enable the gesturedetector on the body again. This is where UI design is going to get a bit tricky (why I asked other questions about are you sure you want to go this way in another thread, because you are going to have to figure out a way where the user triggers drag which disables the bodies listener, then once done, re-enables, etc…

[shweta]

thanks @munsterlander i have solved this isuue by using jquery drag and drop.