How to combine jquery ui draggable sortable stuff with custom scale code?

Question

i am trying to combine my draggable sortable stuff with some scale code that works well for me. i just failed to find a good solution yet.

take a look at that: http://jsfiddle.net/UXLAE/7/

i've commented out the scale code so that you can see how the app should actually works.

you have the top panel and can drag items from there to the bottom panel (items are cloned). in the bottom panel you must be able to sort the items.

now i also want to be able to scale every item on mouseover, both in the top and the bottom panel. the scale must be an overlay and must have the same center as the source item. i failed to do it with .animate() or .effect("scale") which would have made things a lot easier, but i managed to write some custom code that works pretty well (the part i commented out). my problem is that now i have no idea how to combine the custom code with what i already have. they kinda break each other ;) but look for yourself.

would be nice if you could post some ideas or even a solution.

greetings

Answer 1

You have your original element working well enough but I see that your commented out code breaks the functionality.

Have a look at your droppable code:

accept: "#topSquareList li",

Your scaling function has made a clone which is not a part of #topSquareList. I suspect this is why.

When you use clone(), this clone is not a child of #topSquareList (only the original is) which is why your selector does not match it in your droppable code. You need to sort out what you want to drop and make an appropriate selector.

Update:

After some fiddling around, I came up with this: http://jsfiddle.net/UXLAE/27/

Your scale code is now working in conjunction with dragging/dropping/sorting. You should compare what I made to your original code to figure out why it wasn't working - there were more than a few reasons why. Does it help?

Answer 2

If you can use CSS transformations, then simply adding the following rule will accomplish the scaling without any JavaScript and therefore zero impact on the jQueryUI dragging, dropping or sorting.

.square:hover {
    -webkit-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    -moz-transform:scale(1.2);
    transform:scale(1.2);
}

Native browser support for transform is not complete, but the major modern browsers are fully supported. There is a workaround for IE < v9 if you need to support those browsers.