How to make css3 scaled elements draggable

Question

I've noticed that the CSS3 scale attribute does really bad things to jquery ui, specifically to sortable. The problem is that the mouse still needs to move as much as if the elements were not scaled. Check out this jsfiddle example.

Does anybody have thoughts on how to fix this? Is it possible to change the speed that the mouse moves? I'm going to look into the html5 native drag and drop next, and try to write my own sortable function.

UPDATE:

Jquery ui draggable works ok with CSS3 scaled elements, here is a fiddle for it.

lashleigh · Accepted Answer · 2011-02-22T04:00:12.107

It turns out the real answer does not require writing special move functions. Jquery ui sortable can be used as long as the items being sorted have been wrapped in a div of the appropriate size with overflow hidden. Check this jsfiddle for an example.

The problem was that I had forced the scaled divs to be close to one another using a negative margin. Then when I started to drag an item it was taking up the wrong amount of space. With the scaled item wrapped in a non-scaled div everything works as expected.

lashleigh · Answer 2 · 2011-11-04T05:30:51.390

I don't have a solution for working with jquery ui but I do have a solution for working with Raphael and by extension other svg objects.

First, using chrome or firefox, go drag the dots around in this jsfiddle. Be sure to drag both dots and to use the slider at the bottom to change the scale of the box. The slider has a default scale range of .4 to 1.2. In Chrome the slider is actually a slider but in Firefox it shows up as a textbox. If you are using firefox enter values that are 100 x the scale, i.e. 70 => 0.7.

What you should have just experienced is that the black dot tracks with the mouse regardless of the scale and the red dot only tracks when the scale is 1.0.

The reason for this is the two dots are using different 'onMove' functions. The black dot moves according to 1/scale while the red dot moves normally.

var moveCorrected = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + (1/scale)*dx, 
      cy: this.oy + (1/scale)*dy
    });
}
var move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({
      cx: this.ox + dx, 
      cy: this.oy + dy
    });
}

So, in answer to my original question. You can't (and shouldn't) be able to change how the mouse moves, that is clearly user defined behavior, but you can change the move function of the object being moved to track with the mouse.

How to make css3 scaled elements draggable

2 Answers2

Linked