I am working with jquery on dragging icons around on a webpage from threedubmedia.com's drag js script. This works by assigning the class="drag" to the images.
The jquery looks like this:
jQuery(function($){
$('.drag').drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
});
The css looks like this:
.drag {
position: absolute;
cursor: move;
}
An example looks like this:
<img width="129px" title="Icon1" style="display: block; float: left; z-index: 1000; width: 122px; left: 751px; top: 1223px;" src="icon1.png" class="drag">
<img width="129px" title="Icon2" style="display: block; float: left; z-index: 1000; width: 129px; left: 900px; top: 1200px;" src="icon2.png" class="drag">
When resizing the browser window or zooming in and out, the icons shift. I am aiming to keep them from shifting by having their positions "pinned". I tried changing the .drag css to position:relative instead of absolute, but that didn't work for me. I think it the jQuery function has to be changed but I am no expert on this subject and I am turning to you guys for help.