i am trying to bine 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: /

i've mented 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 mented out). my problem is that now i have no idea how to bine 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

i am trying to bine 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/UXLAE/7/

i've mented 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 mented out). my problem is that now i have no idea how to bine 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

• javascript
• jquery
• html
• css
• jquery-ui

Share Improve this question Follow edited Jan 16, 2012 at 16:18 Egi asked Jan 16, 2012 at 15:31 EgiEgi 1,2561010 silver badges2020 bronze badges 4

• well .. kind of very basic but thx :) – Egi Commented Jan 18, 2012 at 14:15
• So, after I gave you some ideas and then a solution where I fixed your broken code you still haven't accepted my answer? – Matthew Commented Feb 4, 2012 at 14:02
• your ideas were good, thank you. but your solution did not fix my initial problem, so no i can't accept your answer, i also wrote a ment to your answer why i can't. – Egi Commented Feb 6, 2012 at 9:42
• You already saw this? jsfiddle/UXLAE/27 – Matthew Commented Feb 6, 2012 at 10:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You have your original element working well enough but I see that your mented 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/UXLAE/27/

Your scale code is now working in conjunction with dragging/dropping/sorting. You should pare 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?

If you can use CSS transformations, then simply adding the following rule will acplish 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 plete, but the major modern browsers are fully supported. There is a workaround for IE < v9 if you need to support those browsers.