Issues with Scriptaculous sortables and handles (elements not ordering properly)

Question

I'm trying to create a two column sortable layout using Scriptaculous and without handles, it works absolutely fine and i'm able to swap div elements between the two columns and change the order of them in the current column. However, when attempting to add a handle to the div elements, I am unable to successfully move them between the two columns or change the order of them in the current column.

I have tried to swap the handle element to an image which hasn't fixed the issue and changed the div identifier from a class to an id, but once again it hasn't fixed the issue.

Code without handles (Able to grab from anywhere within the div, works fine)

Code with handles (The handles are the red bordered boxes, doesn't work - for best example, change output size to 1100px)

I've been searching both here and elsewhere on the internet to find a solution to this, or see if anybody else is experiencing the same issue but i'm yet to find another case of this happening.

Answer 1

I can see from your code that you have $$(.handle) this should not have any $'s