7

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

Egi
  • 1,256
  • 9
  • 20
  • well .. kind of very basic but thx :) – Egi Jan 18 '12 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 Feb 04 '12 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 comment to your answer why i can't. – Egi Feb 06 '12 at 09:42
  • You already saw this? http://jsfiddle.net/UXLAE/27/ – Matthew Feb 06 '12 at 10:49

2 Answers2

4

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?

Matthew
  • 8,183
  • 10
  • 37
  • 65
  • i added the class zoomHelper class to the accept and it works. http://jsfiddle.net/UXLAE/11/ – Damen TheSifter Jan 16 '12 at 22:56
  • there are some problems with your solution. i need the clone of the original item down there, not the helper. what also breaks is the sortability of the bottom part. – Egi Jan 17 '12 at 10:50
  • One problem at a time. Did you fix the accept selector on your droppable? – Matthew Jan 17 '12 at 11:50
  • sometimes if you handle one problem at a time you end up where you started ;D but lets assume i have "fixed" the accept selector on my droppable, what then? – Egi Jan 17 '12 at 12:51
  • 1
    Then you have fixed an apparent problem with your code and continue coding. Let me know what issues you run into next. – Matthew Jan 17 '12 at 14:21
  • well .. for example that i can not sort the items in the "bottomList" anymore: http://jsfiddle.net/UXLAE/21/ . – Egi Jan 17 '12 at 15:03
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.

andyb
  • 43,435
  • 12
  • 121
  • 150
  • hmm not bad, but in that case i would have to mess around with the overflow of the parent elements, kind of destroying my layout in the process. i guess it all has its pros and cons ;) – Egi Jan 18 '12 at 14:14
  • Sorry but Scaling an element with CSS messes up jquery's draggable and sortable quit a bit. Offsets are wrong, dragstart positions are wrong. The higher the scaling the higher the impact. http://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale – ProblemsOfSumit Apr 01 '14 at 10:13