As a newcomer to the programming world, I am venturing into my first jQuery project for my ICT school assignment.
Here is an overview of the project:
I have various draggable objects (images) within #wrapper, which is defined in my style.css file.
My goal is to allow these images to change when dragged over a background image that is centrally positioned beneath the wrapper. To achieve this, I am successfully detecting the location of each object:
drag: function(){
var who = $("#draggable1");
var offset1 = who.offset();
var xPos1 = offset1.left;
var yPos1 = offset1.top;
$('#posX').text('x: ' + xPos1);
$('#posY').text('y: ' + yPos1);
I then determine if the object is within certain X and Y coordinates of the background picture for it to change:
if(yPos1 > '115' && yPos1 < '578')
{
this.src = 'pinkward5.png'
}
In addition, I have included code to revert the object back to its original position if dropped outside the boundaries of the background image:
if(xPos1 < '717' || xPos1 > '1202')
{
who.animate({ 'top': offset1.top == '0', 'left': offset1.left == '0'}, 200, function(){
who.stop( true,true );
who.mouseup();
this.src = 'visionward.png'
});
However,
When using a different monitor or adjusting the browser window size, the coordinates change, causing the code not to function as intended due to varying offsets.
My query:
How can I ensure consistent coordinates regardless of screen resolution or browser window size? Perhaps through using percentages or checking whether the object remains within the CSS border of the background image?
Thank you! I hope that I have followed all guidelines outlined by Stack Overflow.