The element's original transform properties are discarded while dragging

[wugangca]

In the "positionDrag" function, it replace the transform style with only translate(...) and in the "dragEnd" and "destroy" functions, it empties the transform style.
If the element previously has some transform styles, e.g. rotate, scale, they will be lost.
Please update the code like

In positionDrag, keep the original transform styles except translate:
var transform = this.element.style[ transformProperty ];
transform = transform.replace(/translate(3d)?(.*)/, '');
this.element.style[ transformProperty ] = transform + translate( this.dragPoint.x, this.dragPoint.y );

After drag, keep the original transform styles except translate

var transform = this.element.style[ transformProperty ];
transform = transform.replace(/translate(3d)?\(.*\)/, '');
this.element.style[ transformProperty ] = transform;

Thanks,

[desandro]

Thanks for reporting this issue. It's certainly a bug, but hasn't been too big of an issue so far.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[wugangca]

I have the fix for this issue, and would like to push my fix?

[desandro]

sure, let's take a look :)

[peterbe]

I tried it out. It seems to work.
However, what doesn't work is to mix this with rotation. My element looks like this:

.thing {
    transform: rotate(270deg);
}

Whilst it's being dragged around, the combined CSS becomes:

transform: rotate(270deg) translate3d(-5px, 2px, 0px)

...etc.

So the code does that it does but the dragging around of it is nuts. It just doesn't appear to work.

[dtheb]

is this implemented yet?? i need this feature to implement scaling/zoom effect 😢

[ethanclevenger91]

Related (perhaps) - on my implementation, when I click on an element with transform, the element immediately gets a left:9px that isn't removed after dragging. That gets added to on each successive drag, so it moves more and more left.

Script:

$('.draggable').each(function() {
    var draggableElem = $(this)[0];
    var draggie = new Draggabilly(draggableElem, {
      axis:'y',
      containment:true
    });
    draggies.push(draggie);
  })

Styles:

.draggable {
    width:25px;
    height:25px;
    border-radius:50%;
    //its width is larger than its container, so this centers it horizontally and vertically
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
}

[cstolli]

👍 really need this!