Forum: Ruby on Rails Dragable element

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
A049c3597983fdaaa2af2b0010c49abc?d=identicon&s=25 Tim Perrett (timperrett)
on 2006-05-14 20:15
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
A049c3597983fdaaa2af2b0010c49abc?d=identicon&s=25 Tim Perrett (timperrett)
on 2006-05-14 21:43
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();
}
This topic is locked and can not be replied to.