StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Took a lot of time and effort to fix this, but finally, I have a solution that works.</p> <p>This solution works for both Firefox and IE. #canvas is the div that contains the draggable. Note that we have to make sure the elements stays inside the canvas manually. </p> <p>This also works if if canvas has a different zoom level than the rest of the page.</p> <pre><code>var pointerX; var pointerY; $(c).draggable({ start : function(evt, ui) { pointerY = (evt.pageY - $('#canvas').offset().top) / zoom - parseInt($(evt.target).css('top')); pointerX = (evt.pageX - $('#canvas').offset().left) / zoom - parseInt($(evt.target).css('left')); }, drag : function(evt, ui) { var canvasTop = $('#canvas').offset().top; var canvasLeft = $('#canvas').offset().left; var canvasHeight = $('#canvas').height(); var canvasWidth = $('#canvas').width(); // Fix for zoom ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY); ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX); // Check if element is outside 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(); // Finally, make sure offset aligns with position ui.offset.top = Math.round(ui.position.top + canvasTop); ui.offset.left = Math.round(ui.position.left + canvasLeft); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload