Dennis_b: Drag&Drop

SELF-Forum

Drag&Drop

Dennis_b
– Informationen zu den Bewertungsregeln

Hallo nochmal,

Wie kann man mit JavaScript z.b ein kleines Puzzle erstellen.
Damit meine ich etwas (bildauschnitt) von einem ort um anderen mit der Maus zu steuern und abzulegen (Drag&Drop)?

Wer kann mir eine gute quelle angeben wo ich das evtl nachlesen kann?

Ich bedanke mich, Dennis

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Drag&Drop

    Knusperklumpen
    – Informationen zu den Bewertungsregeln

    Hi,
    ich arbeite derzeit hiermit und bin recht begeistert von den Möglichkeiten:
    http://script.aculo.us/

    mfg
    Knusperklumpen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Drag&Drop

    Thorsten F.
    – Informationen zu den Bewertungsregeln

    Hallöchen, sowas in der Art?

    <html>
    <head>

    <title> DHTML</title>

    <style type ="text/css">
    #eb1
     {
     position:absolute;
     background-color:green;
     height:50px;
     width:50px;
     top:150px;
     left:150px;
     border:#0000ff solid 15px;
     }
    </style>

    <script type="text/javascript">

    document.onmousemove = machWas;
     var mausX;
     var mausY;
     var test;
     window.name = "Huhu"; //Parameter übergeben (ohne get und cockies)

    function machWas()
     {
      mausX= (document.captureEvents)?arguments[0].pageX:event.x;
      mausY=(document.captureEvents)?arguments[0].pageY:event.y;
     }

    var counter=1
     var name="ebene5";

    function start()
     {

    for (var i= 1; i<=counter; i++ )
      {

    }
      var ebene1 = document.createElement("div");
      ebene1.setAttribute("id", "eb" + counter + "");
      ebene1.setAttribute("name", "name:1");

    if(window.opera || window.netscape)
      {
       ebene1.setAttribute("onmousedown", "zeige('eb1')");
       ebene1.setAttribute("onmouseup", "halt()");
      }
      else
      {
       ebene1.setAttribute("onmousedown", zeige);
       ebene1.setAttribute("onmouseup", halt);
       ebene2.setAttribute("onmousedown", zeige);
       ebene2.setAttribute("onmouseup", halt);
       ebene3.setAttribute("onmousedown", zeige);
       ebene3.setAttribute("onmouseup", halt);
      }
      document.getElementsByTagName("body")[0].appendChild(ebene1);

    }

    var timer = window.setTimeout("zeige()",1);

    function zeige()
     {
      if(this.id || arguments[0])
      {
       var ebID = (arguments[0])?arguments[0]:this.id;
       document.getElementById(ebID).style.left = mausX -25 + "px";
       document.getElementById(ebID).style.top = mausY -25 + "px";

    var Xtimer = "zeige('" + ebID + "')";    //string
       timer = window.setTimeout(Xtimer, 1);      // fkt.(), wert ind ms
      }
     }

    function halt()
     {
      window.clearTimeout(timer);
     }

    </script>
    </head>

    <body onload="start()">

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Drag&Drop

    Thorsten F.
    – Informationen zu den Bewertungsregeln

    Ups,....habe den Code nochmal ein bisl aufgeräumt:

    <html>
    <head>

    <title> DHTML</title>

    <style type ="text/css">
    #eb1
     {
     position:absolute;
     background-color:green;
     height:50px;
     width:50px;
     top:150px;
     left:150px;
     border:#0000ff solid 15px;
     }
    </style>

    <script type="text/javascript">

    document.onmousemove = machWas;
     var mausX;
     var mausY;

    function machWas()
     {
      mausX= (document.captureEvents)?arguments[0].pageX:event.x;
      mausY=(document.captureEvents)?arguments[0].pageY:event.y;
     }

    function start()
     {

    var ebene1 = document.createElement("div");
      ebene1.setAttribute("id", "eb1");

    if(window.opera || window.netscape)
      {
       ebene1.setAttribute("onmousedown", "zeige('eb1')");
       ebene1.setAttribute("onmouseup", "halt()");
      }
      else
      {
       ebene1.setAttribute("onmousedown", zeige);
       ebene1.setAttribute("onmouseup", halt);
      }
      document.getElementsByTagName("body")[0].appendChild(ebene1);

    }

    var timer = window.setTimeout("zeige()",1);

    function zeige()
     {
      if(this.id || arguments[0])
      {
       document.getElementById("eb1").style.left = mausX -25 + "px";
       document.getElementById("eb1").style.top = mausY -25 + "px";

    var Xtimer = "zeige('eb1')";
       timer = window.setTimeout(Xtimer, 1);
      }
     }

    function halt()
     {
      window.clearTimeout(timer);
     }

    </script>
    </head>

    <body onload="start()">

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Drag&Drop

      Kalle_B
      – Informationen zu den Bewertungsregeln

      feine Sache, habe ich mal abgespeichert.

      Kleine, aber feine Ergänzung:

      #eb1 {

      cursor:move;
      ...

      Kalle

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln