Created
May 17, 2017 10:01
-
-
Save ahvonenj/5d4d8af0f7b40d11b72c6c6a0f2928e6 to your computer and use it in GitHub Desktop.
JQuery UI Draggable Scale Fix (Actually working)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://stackoverflow.com/questions/17098464/jquery-ui-draggable-css-transform-causes-jumping | |
//css3 transform bug with jquery ui drag - fixed(works fine whether position, absolute or relative) | |
var __dx; | |
var __dy; | |
var __scale=0.5; | |
var __recoupLeft, __recoupTop; | |
$("#draggable").draggable( { | |
//revert: true, | |
zIndex: 100, | |
drag: function ( event, ui ) { | |
//resize bug fix ui drag `enter code here` | |
__dx = ui.position.left - ui.originalPosition.left; | |
__dy = ui.position.top - ui.originalPosition.top; | |
//ui.position.left = ui.originalPosition.left + ( __dx/__scale); | |
//ui.position.top = ui.originalPosition.top + ( __dy/__scale ); | |
ui.position.left = ui.originalPosition.left + ( __dx); | |
ui.position.top = ui.originalPosition.top + ( __dy ); | |
// | |
ui.position.left += __recoupLeft; | |
ui.position.top += __recoupTop; | |
}, | |
start: function ( event, ui ) { | |
$( this ).css( 'cursor', 'pointer' ); | |
//resize bug fix ui drag | |
var left = parseInt( $( this ).css( 'left' ), 10 ); | |
left = isNaN( left ) ? 0 : left; | |
var top = parseInt( $( this ).css( 'top' ), 10 ); | |
top = isNaN( top ) ? 0 : top; | |
__recoupLeft = left - ui.position.left; | |
__recoupTop = top - ui.position.top; | |
}, | |
stop: function ( event, ui ) { | |
$( this ).css( 'cursor', 'default' ); | |
//alternate to revert (don't use revert) | |
$( this ).animate( { | |
left: $( this ).attr( 'oriLeft' ), | |
top: $( this ).attr( 'oriTop' ) | |
}, 1000 ) | |
}, | |
create: function ( event, ui ) { | |
$( this ).attr( 'oriLeft', $( this ).css( 'left' ) ); | |
$( this ).attr( 'oriTop', $( this ).css( 'top' ) ); | |
} | |
} ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is some old fiddle of mine. I have no idea what this was for or if it fixed anything. You should:
My best guess is that the original jQuery UI code had that scale taken into consideration (thus the lines), but this was not done right, so the actual fix was to do the calculations without the divisions by scale.