How to combine jquery ui draggable sortable material with custom scaling code?

I'm trying to combine my draggable sortable stuff with some scaling code that works well for me. I just could not find a good solution.

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

I commented on the scale code so that you can see how the application should really work.

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

now I also want to be able to scale each element on the mouse, both in the top and bottom panels. the scale must be an overlay and must have the same center as the original element. I could not do this with .animate () or .effect ("scale"), which would make it a lot easier, but I managed to write some kind of custom code that works very well (the part I commented on). my problem is that now I have no idea how to combine custom code with what I already have. they love each other;) but look for yourself.

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

Hi

+7
source share
2 answers

You have your original element, which works quite well, but I see that your commented code violates the functionality.

Take a look at your droppable code:

accept: "#topSquareList li", 

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

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

Update:

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

Your scale code now works in conjunction with drag & drop / sort / sort. You must compare what I did with your source code to understand why it does not work - there were several reasons. Does it help?

+4
source

If you can use CSS transforms by simply adding the following rule, you can scale without any JavaScript and therefore get zero impact on drag and drop, jQueryUI sorting, 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 transform browser support is not complete , but major modern browsers are fully supported. There is a workaround for IE <v9 if you need to support these browsers.

+2
source

All Articles