Ergebnis 1 bis 2 von 2
  1. #1
    Angelchen ist offline Grünschnabel
    registriert
    05-02-2009
    Beiträge
    6

    Dynamische ListBox (Einträge mit Maus verschieben)

    Hallo.

    Ich möchte eine Liste erstellen, die ich dann dynamisch sortieren kann. Dh. ich nehme ein Elemente mit der Maus auf und verschiebe es in der Liste...

    Für mich stellt sich die Frage jetzt erstmal, wie ich sinnvollen Zugriff auf die einzelnen Elemente dieser Liste bekomme.

    Bei mir hier habe ich jetzt einfach mal ein paar DIVs erstellt, die ich dann verschieben würde. Ich weiß jetzt allerding auch nicht, ob andere Elemente evtl. sinnvoller wären...

    Ich hatte das Beispiel auf dem Buch AJAX Kompendium vom MuT abgewandelt, nur komme ich jetzt nich klar, wie ich das umschreibe, damit ich jeden einzelnen DIV für sich anspreche.


    Hier die letzte funktionierende Version:
    HTML-Code:
    <html>
      <head>
        <title>Drag und Drop</title>
        <script language="JavaScript"><!--
          var x_koo;
          var y_koo;
          function start() {
    
            schreibe();
            if (document.captureEvents) {
              document.captureEvents(Event.MOUSEDOWN);
            }
          }
          
            function start_move(nummer) {
            if (document.layers) {
              document.nummer.onmousedown = druecken;
            } else if (document.all) {
              document.all.nummer.onmousedown = druecken;
            } else if (document.getElementById) {
            
              document.getElementById(nummer).onmousedown = druecken;          
            }
            
          }
    
          function druecken(e) {
    
            if (document.layers) {
              document.ele1.offX = e.pageX - document.ele1.pageX;
              document.ele1.offY = e.pageY - document.ele1.pageY;
            } else if (document.all) {
              x_koo = event.clientX - document.all.ele1.style.pixelLeft;
              y_koo = event.clientY - document.all.ele1.style.pixelTop;
            } else if (document.getElementById) {
              x_koo = e.clientX - parseInt(document.getElementById("ele1").style.left);
              y_koo = e.clientY - parseInt(document.getElementById("ele1").style.top);
            }
            if (document.captureEvents)
              document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    
            document.onmousemove = ziehen;
            document.onmouseup = aufheben;
    
            return false;
          }
    
          function ziehen(e) {
    
            if (document.layers) {
              document.ele1.pageX = e.pageX - document.ele1.offX;
              document.ele1.pageY = e.pageY - document.ele1.offY;
            } else if (document.all) {
              document.all.ele1.style.pixelLeft = event.clientX - x_koo;
              document.all.ele1.style.pixelTop = event.clientY - y_koo;
            } else if (document.getElementById) {
              document.getElementById("ele1").style.left = parseInt(e.clientX) - x_koo;
              document.getElementById("ele1").style.top = parseInt(e.clientY) - y_koo;        
            }
    
            return false;
          }
    
          function aufheben() {
    
            if (document.releaseEvents)
              document.releaseEvents(Event.MOUSEMOVE);
    
            document.onmousemove = null;
    
            return false;
          }
          
          function schreibe () {
            var elemente = new Array('element1', 'element2','element3','element4');
            var elemente_id = new Array('ele1', 'ele2', 'ele3', 'ele4');
            var str = "";
            var offset = 20;
            for(var i in elemente) {
              str += "<div onmousedown='start_move("" + elemente_id[i] + "");' id='" + elemente_id[i] + "' style='top:" + (offset * 0) +"px; '>" + elemente[i] + "</div>";
            }
            document.getElementById('inhalt').innerHTML = str;
          }
        //--></script>
        <style type="text/css">
          
          #inhalt div {
            position:relative;
            left: 0px;
            height: 19px;
            border: 1px red solid;
            margin: 0px;
          }
        </style>
      </head>
      <body onload="start()">
        <div id="inhalt" style="border: 2px red solid; width: 300px; height: 200px;overflow:hidden;">
        </div>
      </body>
    </html>
    Hoffe, ich habe mich nich zu unverständlich ausgedrückt^^

    Mit freundlichen Grüßen
    AoE

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Dynamische ListBox (Einträge mit Maus verschieben)

    Das Skript ist sowohl veraltet als auch schlecht geschrieben. Such' dir ein neues. Zum Thema drag'n'drop findet man viele Sachen.

Ähnliche Themen

  1. Listbox in JavaScript
    Von engel im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 10-01-2009, 16:29
  2. Listbox Problem mit IE
    Von Quadral im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 23-06-2008, 09:43
  3. div mit der maus verschieben...
    Von ChefDeus im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 11-06-2008, 21:23
  4. Elemente mit der Maus verschieben
    Von Deever im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 29-06-2006, 16:16
  5. movieclip mit der maus verschieben
    Von vandyce im Forum Flash
    Antworten: 2
    Letzter Beitrag: 26-05-2004, 16:18

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •