jQuery - draggable div with zoom
You don't need to set zoom property. I just added the difference to draggable's position which occurs due to the zoom property. Hope it helps.
Fiddle
http://jsfiddle.net/TqUeS/
JS
var zoom = $('#canvas').css('zoom');
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();
$('#dragme').draggable({
drag: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
// don't let draggable get outside the canvas
if (ui.position.left < 0)
ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth)
ui.position.left = canvasWidth - $(this).width();
if (ui.position.top < 0)
ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight)
ui.position.top = canvasHeight - $(this).height();
}
});
Jquery droppable area wrong if zoomed
Thats a known jQueryUI-Bug since many years (See this or this).
AFAIK there is still no way to fix this.
Maybe these changes in the jQueryUI-Code itself may help you.
Related Topics
Difference Between Defer().Promise and Promise
Find Dom Element by Id When Id Contains Square Brackets
How to Refer to a Variable Using a String Containing Its Name
Es6/Es2015 Object Destructuring and Changing Target Variable
Meteor.Publish: Publish Collection Which Depends on Other Collection
How to Add Dom Element Script to Head Section
Get the Dom Path of the Clicked <A>
HTML 5 <Audio> - Play File at Certain Time Point
Adding Images to an HTML Document with JavaScript
Jquery "Blinking Highlight" Effect on Div
How to Dynamically Remove a Stylesheet from the Current Page
React - Prevent Event Trigger on Parent from Child
Jquery to Change Style Attribute of a Div Class
Converting Em to Px in JavaScript (And Getting Default Font Size)
Difference Between Throttling and Debouncing a Function
A Component Is Changing an Uncontrolled Input of Type Text to Be Controlled Error in Reactjs