henry: drag layer

Beitrag lesen

hallo
ich habe ein script gefunden, dass ebenen drag und drop fähig macht. nun möchte ich dass script weiter anpassen, komme aber mit meinem wissen nicht weiter...

das skript:

function dragMousePos(e) {
  if( !e ) {
    e = window.event;
  }
  if( !e || ( typeof( e.pageX ) !=
    'number' && typeof( e.clientX ) != 'number' ) ) {
    return [0,0];
  }
  if( typeof( e.pageX ) == 'number' ) {
    var xcoord = e.pageX;
    var
      ycoord = e.pageY;
  }
  else {
    var xcoord = e.clientX;
    var ycoord = e.clientY;
    if( !( ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) ||
      ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 )
      || window.navigator.vendor == 'KDE' ) ) {
      if( document.documentElement &&
        ( document.documentElement.scrollTop ||
        document.documentElement.scrollLeft ) ) {
        xcoord += document.documentElement.scrollLeft;
        ycoord +=
          document.documentElement.scrollTop;
      }
      else if( document.body && ( document.body.scrollTop ||
        document.body.scrollLeft ) ) {
        xcoord += document.body.scrollLeft;
        ycoord +=
          document.body.scrollTop;
      }
    }
  }
  return [xcoord,ycoord];
}

function dragIsDown(e) {
  if( ( e && ( e.which > 1 || e.button > 1 ) ) || ( window.event &&
    ( window.event.which > 1 || window.event.button > 1 ) ) ) {
    return
      false;
  }
  if( document.onmouseup == dragIsMove ) {
    document.onmousemove =
      storeMOUSEMOVE;
    document.onmouseup = window.storeMOUSEUP;
  }
    window.msStartCoord = dragMousePos(e);
  window.lyStartCoord =
    this.style?[parseInt(this.style.left),parseInt(this.style.top)]:
  [parseInt(this.left),parseInt(this.top)];
  if( document.captureEvents && Event.MOUSEMOVE )
  {
    document.captureEvents(Event.MOUSEMOVE);
    document.captureEvents
      (Event.MOUSEUP);
  }
  window.storeMOUSEMOVE = document.onmousemove;
  window.storeMOUSEUP =
    document.onmouseup;
  window.storeLayer = this;
  document.onmousemove = dragIsMove;
  document.onmouseup = dragIsMove;
  return false;
}

function dragIsMove(e) {
  var msMvCo = dragMousePos(e);
  if( !e ) {
    e = window.event ?
    window.event : ( new Object() );
  }
  var newX = window.lyStartCoord[0] + ( msMvCo[0] - window.msStartCoord
    [0] );
  var newY = window.lyStartCoord[1] + ( msMvCo[1] - window.msStartCoord
    [1] );

if( e.type && e.type.toLowerCase() == 'mouseup' )
    {
      document.onmousemove = storeMOUSEMOVE;
      document.onmouseup =
        window.storeMOUSEUP;
    }
  if( navigator.product == 'Gecko' ) {
    window.setTimeout('dragIsMove2('+newX+','+newY+');',1);
  }
  else {
    dragIsMove2(newX,newY);
  }
}

function dragIsMove2(x,y) {
  var oPix = ( document.childNodes ? 'px' :
  0 ), theLayer = ( window.storeLayer.style ? window.storeLayer.style :
  window.storeLayer );
  theLayer.left = x + oPix;
  theLayer.top = y +
    oPix;
}

<div id="drag" onmouseover="this.onmousedown=dragIsDown;">

1. möchte ich, dass die ebenen nur durch einen "handlebar" verschiebbar sind, also wie bei einem interface mit fenstern. so habe ich zwei verschachtelte ebenen definiert, einen container und eine ebene die als "handlebar" dient, weiss nun aber nicht, wie ich der handlebar-ebene sagen kann, dass sie den container verschiebt...

2. wenn ich die ebenen mit der maus verschiebe, werden die darunterliegenden bild-rollovers aktiviert... gibt es da eine lösung die das verhindert?

bin dankbar für tipps!
merci und gruss marc