Dragable element


#1

Hey all

Im having a problem… Ok, this is the situation…

I have a small product image, on which ive floated a div over it, and
defined it as draggable. Now, this works, and i can drag it around no
problem. great. but then, what i want to do is, based on the location of
that dragable element from the top and the left, to move (using the
Effect.MoveBy method) a larger image - so effective its a detail viewer.
But, ive come into problems. I can get the logic to work out exactly
where the box is, but when i go to movve it, it works perfectly on the
first go, but on subsequent moves it goes the wrong way?!

My javascipt is…

var oiX = 0;
var oiY = 0;

function setOldVars(){
oiX = $(‘squ’).style.top;
oiY = $(‘squ’).style.left;
iX = oiX.replace(‘px’, ‘’);
iY = oiY.replace(‘px’, ‘’);
//$(‘ggggg’).innerHTML = 'X: ‘+iX+’ Y: '+iY;
}

function moveProductImage(x, y, prod){

var nX = x.replace(‘px’, ‘’);
var nY = y.replace(‘px’, ‘’);
//var nxpos=0, nypos=0;

if(nY < iY){
nypos = nY - iY;
// 25 -
} else if(nY > iY){
nypos = iY - nY;
}
if(nX < iX){
nxpos = nX - iX;
} else if(nX > iX){
nxpos = iX - nX;
}

new Effect.MoveBy(prod, (nxpos2.5), (nypos2.5));
//new Effect.Move (prod,{ x: 10, y: 10, mode: ‘absolute’});
//$(‘squ’).style.top = nX+‘px’;
//$(‘squ’).style.left = nY+‘px’;
//$(‘ggggg’).innerHTML = ‘iX: ‘+iX+’ iY: ‘+iY+’ nX: ‘+nX+’ nY: ‘+nY+’
nypos:’+nypos+’ nxpos:’+nxpos;
}

and my HTML is…

<div id="shoppcon">
  <p>| <%=link_to('Add to basket', :action => 'addtobasket', :id => 

params[:id])%> |
<%=link_to(‘Checkout’, :action => ‘checkout’)%> |


<div id="small" style="background-image: url(<%=url_for(:controller 

=> ‘shop’, :action => ‘thumb’, :id => params[:id] + ‘.jpg’)%>);">


<div id="inspector">
  <div id="enlargement">
  	<%=image_tag(url_for(:controller => 'shop', :action => 'image', 

:id => params[:id] + ‘.jpg’), { :id => ‘productlarge’ })%>


Large view open



Detail


Large

If anyone has any ideas at all that would be great… im sure its a
math related problem but i just cant see it!!

Many thanks

Tim P.


#2

FYI this is the working JS

function moveProductImage(x, y, prod){

var nX = x.replace(‘px’, ‘’);
var nY = y.replace(‘px’, ‘’);
//var nxpos=0, nypos=0;

if(nY < iY){
//nypos = nY - iY;
nypos = iY - nY;
// ny less that iy; 30-50 = -20;
} else if(nY > iY){
nypos = iY - nY;
//nypos = nY - iY;
// ny greater than iy; 50-30 = 20;
} else if(nY == iY){
nypos = 0;
// if no change, ignore it.
}
if(nX < iX){
//nxpos = nX - iX;
nxpos = iX - nX;
// nx less than ix; 29-32= -3
} else if(nX > iX){
nxpos = iX - nX;
//nxpos = nX - iX;
// nx more than ix; 28-38 = -10
} else if(nX == iX){
nxpos = 0;
// if no change, ignore it.
}

new Effect.MoveBy(prod, (nxpos2.4), (nypos3.8));
//$(‘ggggg’).innerHTML = ‘iX: ‘+iX+’ iY: ‘+iY+’ || nX: ‘+nX+’ nY:
‘+nY+’ || nypos:’+nypos+’ nxpos: '+nxpos;

setOldVars();
}