Rails - May 2006 - Dragable element

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, (nxpos*2.5), (nypos*2.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'')%> |</p>
    </div>

  	<div id="small" style="background-image:
url(<%=url_for(:controller
=> ''shop'', :action => ''thumb'', :id
=> params[:id] + ''.jpg'')%>);">
      <div id="squ" onmouseover="new
Draggable(''squ''); setOldVars(); "
onclick="moveProductImage($(this).style.top, $(this).style.left, 
''productlarge'');" ></div>
    </div>

    <div id="inspector">
      <div id="enlargement">
      	<%=image_tag(url_for(:controller => ''shop'',
:action => ''image'',
:id => params[:id] + ''.jpg''), { :id =>
''productlarge'' })%>
      </div>
      <div id="specs">
	    <p>Large view open</p>
	  </div>
      <div class="tab" id="v"><a
href="javascript:void(0);"
onclick="setProductTab(''enlargement'');">Detail</a></div>
      <div class="tpsx"></div>
      <div class="tab" id="tc"><a
href="javascript:void(0);"
onclick="large(''/shop/image/<%=params[:id]%>.jpg'');
setProductTab(''specs'');">Large</a></div>
    </div>

  </div>

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 Perrett

-- 
Posted via http://www.ruby-forum.com/.

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, (nxpos*2.4), (nypos*3.8));
  //$(''ggggg'').innerHTML = ''iX:
''+iX+'' iY: ''+iY+'' || nX:
''+nX+'' nY:
''+nY+'' || nypos:''+nypos+'' nxpos:
''+nxpos;

  setOldVars();
}

-- 
Posted via http://www.ruby-forum.com/.