Question: Using Sly with JQuery Droppable and Sortable

[RayKahn]

Hi, Is it possible to use Sly with JQuery's droppable and sortable? I need to drag and drop elements from one sly slider to another and vice versa.

Many thanks.

[darsain]

Yes, just call .reload() method on both Sly instances after dragging.

[RayKahn]

Thanks for your response. Is there an option in Sly which makes an

droppable and sortable?

[darsain]

No.

[RayKahn]

I have a question regarding adding and removing elements to Sly. Since I am NOT using sly's add or remove methods and instead change the underlying source and dest ULs by calling $item.remove() and $item.append($toDestSlyULList) the sly's li index gets all messed up and the elements all show up side ways. I can never get source sly to move to the first element after remove/add calls. Can you please let me know why is this happening and how to fix it. I have uploaded a screen shot.

Many thanks.

[RayKahn]

I forgot to mention that I do call reload per each add/remove.

[darsain]

Crystal ball is broken. No idea.

But in general it is impossible for Sly to keep track of active indexes if you are modifying items on your own. Use Sly's methods for adding/removing items.

[RayKahn]

Thanks for your response. Using sly's add/remove methods does indeed resolve this particular issue. However, when I add multiple elements to dest sly the "next" button does not get activated unless and until I use the mouse scroll to navigate the destination sly.

The second issue is that when I try to put back the element to source sly (from dest back to source) the page re-loads instead. I know you said crystal ball is broken but I figured I ask since you have been very helpful thus far. Screen shot is included.

Many thanks.

[darsain]

Can you isolate the issues on jsfiddle or a similar service? Screenshots really aren't helpful.

[RayKahn]

will do so in a day or two as it requires a lot of work...

Many thanks.

[RayKahn]

I was able to resolve both issues:

Navigation buttons Issue: Since I was adding list items after dest sly was created (I am not sure there is any relevance here though, you would know better) I added activation call to the last item added. If there are more than one items in the dest sly then prev nav button gets enabled.

Page reload issue: My own fault. So it turns out that adding or removing a list item from dest or source sly unbinds the anchor/any function. I had to rebind my custom function to the anchor after each move. Also, I had to remove '#' from href in my anchor declaration.

BTW, dragging turns out to be much more complicated. When a list item's position is changed by dragging, the li MUST be removed, added to sly in its new position, sly object reloaded and the li activated. These actions make sly be its beautiful self again.

Many thanks and a jolly good work you have done here...

[darsain]

k