www.redmount.com - DHTML

Drag'n'Drop | Описание

Если Вы хотите использовать любой из наших примеров, поставьте на нас ссылку.
Здесь Вы можете взять готовый HTML-код для такой ссылки.
<html>
<head>
<title>www.redmount.com - DHTML - Drag'n'Drop</title>

<script language="Javascript">
<!--
//---------IE CLICK N DRAG CODE--------------------
var curElement,begX=0,begY=0;

  function doMouseMove()
  {
    if ((event.button==1) && (curElement!=null))
    {
      // position object
      var x=event.x;
      var y=event.y;
      curElement.style.pixelLeft=x-begX;
      curElement.style.pixelTop=y-begY;
      event.returnValue = false
      event.cancelBubble = true
    }
  }

  function doDragStart()
  {
    // Don't do default drag operation.
    if ("IMG"==event.srcElement.tagName)
      event.returnValue=false;
  }

  function doMouseDown()
  {
    if ((event.button==1) && (event.srcElement.tagName=="IMG"))
    {
      curElement = event.srcElement
      var x=event.x;
      var y=event.y;
      begX=x-curElement.style.pixelLeft;
      begY=y-curElement.style.pixelTop;
    }
  }

 if (navigator.appName != "Netscape") {
  document.ondragstart = doDragStart;
  document.onmousedown = doMouseDown;
  document.onmousemove = doMouseMove;
  document.onmouseup = new Function("curElement=null")
 }
  

//--------NETSCAPE CLICK N DRAG CODE--------------------
  var oldX, oldY, objSelected="null";
  var totalFlies=20;
        
  function begindrag(e)
  {
    objSelected=getSelectedElement(e.pageX,e.pageY);
    if (objSelected != "null")
    {
      document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove=drag; 
      oldX=e.pageX;
      oldY=e.pageY;
      return false;
    }
  }
  function enddrag(e)
  {
    document.onmousemove=0; 
    document.releaseEvents(Event.MOUSEMOVE);
    objSelected="null";
    return false;
  }
  function drag(e)
  {
    obj.offset(e.pageX - oldX, e.pageY - oldY);
    oldX = e.pageX;
    oldY = e.pageY;
  }
  if (navigator.appName == "Netscape")
  {
    document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    document.onmousedown=begindrag;
    document.onmouseup=enddrag;
  }

  function getSelectedElement(clickX,clickY)
  {
    for (var i=1; i<totalFlies+1; i++)
    {
      eval('obj=document.layers["puz' +i+ '"]');
      if ( (clickX > obj.left) && (clickX < obj.left+obj.clip.width)
         && (clickY > obj.top) && (clickY < obj.top+obj.clip.height))
      {
    return obj;
      }
    }
    return ("null");
  }
//-->
</script>

<style type="text/css">
#backgrnd {position: absolute;  visibility: visible;  left: 30; top: 30; z-index: 1; }
#puz1 {position: absolute;  visibility: visible; left: 450; top: 110; z-index: 2; }
#puz2 {position: absolute;  visibility: visible; left: 500; top: 140; z-index: 3; }
#puz3 {position: absolute;  visibility: visible; left: 480; top: 40; z-index: 22; }
#puz4 {position: absolute;  visibility: visible; left: 450; top: 200; z-index: 4; }
#puz5 {position: absolute;  visibility: visible; left: 430; top: 10; z-index: 5; }
#puz6 {position: absolute;  visibility: visible; left: 490; top: 60; z-index: 6; }
#puz7 {position: absolute;  visibility: visible; left: 450; top: 60; z-index: 7; }
#puz8 {position: absolute;  visibility: visible; left: 500; top: 130; z-index: 8; }
#puz9 {position: absolute;  visibility: visible; left: 490; top: 290; z-index: 9; }
#puz10 {position: absolute;  visibility: visible; left: 400; top: 200; z-index: 10; }
#puz11 {position: absolute;  visibility: visible; left: 500; top: 80; z-index: 11; }
#puz12 {position: absolute;  visibility: visible; left: 420; top: 200; z-index: 12; }
#puz13 {position: absolute;  visibility: visible; left: 490; top: 130; z-index: 13; }
#puz14 {position: absolute;  visibility: visible; left: 420; top: 280; z-index: 14; }
#puz15 {position: absolute;  visibility: visible; left: 420; top: 140; z-index: 15; }
#puz16 {position: absolute;  visibility: visible; left: 500; top: 270; z-index: 17; }
#puz17 {position: absolute;  visibility: visible; left: 430; top: 180; z-index: 18; }
#puz18 {position: absolute;  visibility: visible; left: 450; top: 80; z-index: 19; }
#puz19 {position: absolute;  visibility: visible; left: 430; top: 210; z-index: 20; }
#puz20 {position: absolute;  visibility: visible; left: 500; top: 200; z-index: 21; }
#text {position: absolute;  visibility: visible; left: 15; top: 350; z-index: 0; }
</style>
</head>
<body bgcolor="#666666" background="puzback.gif" text="White" link="White" vlink="White" alink="White">

<div id="text"> Text </div>

<script language="JavaScript">

if (navigator.appName == "Netscape") {

document.write('<div id="backgrnd"><img src="puz00.gif" border=0></div>');
document.write('<div id="puz1"><img name="puz1" src="puz01.gif" border=0></div>');
document.write('<div id="puz2"><img name="puz2" src="puz02.gif" border=0></div>');
document.write('<div id="puz3"><img name="puz3" src="puz03.gif" border=0></div>');
document.write('<div id="puz4"><img name="puz4" src="puz04.gif" border=0></div>');
document.write('<div id="puz5"><img name="puz5" src="puz05.gif" border=0></div>');
document.write('<div id="puz6"><img name="puz6" src="puz06.gif" border=0></div>');
document.write('<div id="puz7"><img name="puz7" src="puz07.gif" border=0></div>');
document.write('<div id="puz8"><img name="puz8" src="puz08.gif" border=0></div>');
document.write('<div id="puz9"><img name="puz9" src="puz09.gif" border=0></div>');
document.write('<div id="puz10"><img name="puz10" src="puz10.gif" border=0></div>');
document.write('<div id="puz11"><img name="puz11" src="puz11.gif" border=0></div>');
document.write('<div id="puz12"><img name="puz12" src="puz12.gif" border=0></div>');
document.write('<div id="puz13"><img name="puz13" src="puz13.gif" border=0></div>');
document.write('<div id="puz14"><img name="puz14" src="puz14.gif" border=0></div>');
document.write('<div id="puz15"><img name="puz15" src="puz15.gif" border=0></div>');
document.write('<div id="puz16"><img name="puz16" src="puz16.gif" border=0></div>');
document.write('<div id="puz17"><img name="puz17" src="puz17.gif" border=0></div>');
document.write('<div id="puz18"><img name="puz18" src="puz18.gif" border=0></div>');
document.write('<div id="puz19"><img name="puz19" src="puz19.gif" border=0></div>');
document.write('<div id="puz20"><img name="puz20" src="puz20.gif" border=0></div>');
}else{
document.write('<div id=Outerdiv style="width:100%;height:380px; width: 600px; ">');
document.write('<img id="backgrnd" src="puz00.gif" border=0>');
document.write('<img id="puz1" src="puz01.gif" border=0>');
document.write('<img id="puz2" src="puz02.gif" border=0>');
document.write('<img id="puz3" src="puz03.gif" border=0>');
document.write('<img id="puz4" src="puz04.gif" border=0>');
document.write('<img id="puz5" src="puz05.gif" border=0>');
document.write('<img id="puz6" src="puz06.gif" border=0>');
document.write('<img id="puz7" src="puz07.gif" border=0>');
document.write('<img id="puz8" src="puz08.gif" border=0>');
document.write('<img id="puz9" src="puz09.gif" border=0>');
document.write('<img id="puz10" src="puz10.gif" border=0>');
document.write('<img id="puz11" src="puz11.gif" border=0>');
document.write('<img id="puz12" src="puz12.gif" border=0>');
document.write('<img id="puz13" src="puz13.gif" border=0>');
document.write('<img id="puz14" src="puz14.gif" border=0>');
document.write('<img id="puz15" src="puz15.gif" border=0>');
document.write('<img id="puz16" src="puz16.gif" border=0>');
document.write('<img id="puz17" src="puz17.gif" border=0>');
document.write('<img id="puz18" src="puz18.gif" border=0>');
document.write('<img id="puz19" src="puz19.gif" border=0>');
document.write('<img id="puz20" src="puz20.gif" border=0>');
document.write('</div>');
document.write('<script FOR="backgrnd" EVENT="onmousedown">');
document.write('event.cancelBubble=true');
document.write('</script>');
}
</script>

</body>
</html>
DHTML

JavaScript Книги

Drag'n'Drop | Описание

JavaScript

Книги
