13 Replies Latest reply: Sep 19, 2014 10:31 AM by resdesign

simple sortable jquery list

Aubrey Scarza Sep 15, 2014 3:45 AM

I have a symbol called list_1, inside the symbol are three groups, each group contains a rectangle and a text box labelling them item 1, item 2, item 3. I want these rectangles to be sortable like the default function on the jquery page Sortable | jQuery UI using the code below I am able to drag them but not sort them. Any help or if anyone has made a simple example already I would very much appreciate it.

yepnope(
     {
       nope:['js/jquery-ui.min.js'],
       complete: init
     }
);

function init() {
sym.$('list_1').sortable();
}

1. Re: simple sortable jquery list

Preran Sep 15, 2014 8:08 AM (in response to Aubrey Scarza)

Hi Aubrey,

Does this help? javascript - How may I sort a list alphabetically using jQuery? - Stack Overflow

Thanks,
Preran
Like Show 0 Likes (0)

Actions
2. Re: simple sortable jquery list

Aubrey Scarza Sep 15, 2014 8:56 AM (in response to Preran)

No, not really, but thanks for trying I need to know how to translate the code so it works within Edge Animate.

I can't find anything Edge specific to help translate how to make ".sortable" actually work. I thought it would be similar to draggable/ droppable, but I've hit a brick wall with this.
Like Show 0 Likes (0)

Actions
3. Re: simple sortable jquery list

resdesign Sep 15, 2014 9:32 AM (in response to Aubrey Scarza)

There is a way better plugin than jquery-Ui to sort and I will have a tutorial about it in the future. In the mean time you could check out their site.
http://isotope.metafizzy.co/

Let me know if you choose to use it and need help.
Like Show 0 Likes (0)

Actions
4. Re: simple sortable jquery list

Aubrey Scarza Sep 16, 2014 1:07 AM (in response to resdesign)

Hey resdesign! Again, thank you for your reply and offer of help but the way that sorts by a click of a certain button is not what I am after.
Maybe I didn't explain well enough. I want the user to be able to sort 3 rectangles in to the order they think they should go in by dragging them above or below each other.
JQuery default functionality sortable example is exactly the outcome I want, it seemed like an easy option but yeah I don't understand how to translate it for Edge.
I will keep looking.
Like Show 0 Likes (0)

Actions
5. Re: simple sortable jquery list

shane_farmer Sep 16, 2014 1:27 AM (in response to Aubrey Scarza)

Hi Aubrey,

The sortable function does not work directly into Edge, but there is a way around it. You can use the Drag/Drop function to allow you to sort it.

To do this you would need to understand arrays, Nested Iteration and Positioning, I have linked a example file that a colleague in my workplace has coded.
Hope this helps you a bit more to what you are trying to do.

http://www.filedropper.com/sortable_1
Like Show 0 Likes (0)

Actions
6. Re: simple sortable jquery list

Aubrey Scarza Sep 16, 2014 1:37 AM (in response to shane_farmer)

yepnope(
     {
       nope:['js/jquery-ui.min.js'],
       complete: init
     }
);

function init() {
     sym.$('list_1').sortable();
}

This makes the rectangles draggable, so sortable must work with some coding, I just don't know what, haha.
I was trying to not have to use a standard drag drop, as to make use of the sortable.
Your file download didn't work. But thanks for trying.
Like Show 1 Like (1)

Actions
7. Re: simple sortable jquery list

resdesign Sep 16, 2014 5:47 AM (in response to Aubrey Scarza)

I will look into it and see if I can make it work for you. Can you make a sample file for me?
Like Show 1 Like (1)

Actions
8. Re: simple sortable jquery list

resdesign Sep 16, 2014 7:13 AM (in response to Aubrey Scarza)

Are you using the css file from jquery_ui? I do not see you loading it. Also, why are you using yepnope instead of script loading/ Do you have an older version? If you are not using the jquery-UI css file, then load the script with script loading.
I'll wait for your sample to see if I can make it work.
Like Show 1 Like (1)

Actions
9. Re: simple sortable jquery list

Aubrey Scarza Sep 16, 2014 7:54 AM (in response to resdesign)

I have sent you my zip file link in a message, resdesign.
Like Show 0 Likes (0)

Actions
10. Re: simple sortable jquery list

resdesign Sep 16, 2014 11:49 AM (in response to Aubrey Scarza)

Here is a file where I made it work but this might no be what you want. Basically I used a text field and their example in the html.
I am not sure how you could make it work with your symbol. I will try some more.
here is the link to the file
Hope this helps.

sortable.zip - Box
Like Show 2 Likes (2)

Actions
11. Re: simple sortable jquery list

Aubrey Scarza Sep 17, 2014 1:27 AM (in response to resdesign)

Thank you for taking the time to so this resdesign, I'm not sure how I would go about setting variables within this code, once the user has re-arranged the list in to the correct order I want something to happen. On the draggable/ droppable I was able to set a variable on the start function of the drag, and then in the droppable I had if statements for each one being dropped to do a particular thing depending on what variable had been turned on, then once all had been dropped move to the next part of the project.
Do you think something like that is possible using this sortable method?
Like Show 0 Likes (0)

Actions
12. Re: simple sortable jquery list

resdesign Sep 17, 2014 5:31 AM (in response to Aubrey Scarza)

You need to read the docs about methods and events. I will try to make a sample for you today.
Like Show 1 Like (1)

Actions
13. Re: simple sortable jquery list

resdesign Sep 19, 2014 10:31 AM (in response to resdesign)

As far as I can tell, mixing draggable and stortable is not really what you want. In the example on jquery-UI, what they show you is that you can add draggables into the list which is great in itself. Since all you want to do is have items that you want placed in a certain order and get a feedback or event when the items are dropped into the order you have assigned to the droppables, then all you have to do is use accept for droppables and work with classes to assign each draggable to the corresponding droppable.
I messaged you a sample that does that.
Again, I am no expert for sortable and there might be a way to listen to events so the items could be placed in a specific order and then trigger a response when that happens.
Since I like to learn new things, I will continue to investigate sortables() and see if I can come up with something.
Like Show 0 Likes (0)

Actions