Ergebnis 1 bis 6 von 6

Thema: Javascript Drag and Drop

  1. #1
    Nyoko
    Gast

    Ausrufezeichen Javascript Drag and Drop

    Hallo

    Ich habe ein kleines Problem.
    Ich habe auf meiner Seite ein Drag and Drop effekt eingebaut, damit der User verschiedene Bilder bewegen kann. Nun möchte ich die Bilder aber einer Position zuordnen und alle versuche mittels x und y haben nicht geklappt.
    Ich möchte jedes einzelne Bild an einer bestimmen Stelle haben (auch aufeinander) damit der User ein bestimmtes Bild finden.

    Code:
    var ie=document.all;
    var nn6=document.getElementById&&!document.all;
    
    var isdrag=false;
    var x,y;
    var dobj;
    
    function movemouse(e)
    {
      if (isdrag)
      {
        dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
        dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
        return false;
      }
    }
    
    function selectmouse(e) 
    {
      var fobj       = nn6 ? e.target : event.srcElement;
      var topelement = nn6 ? "HTML" : "BODY";
    
      while (fobj.tagName != topelement && fobj.className != "dragme")
      {
        fobj = nn6 ? fobj.parentNode : fobj.parentElement;
      }
    
      if (fobj.className=="dragme")
      {
        isdrag = true;
        dobj = fobj; 
        tx = parseInt(dobj.style.left+0);
        ty = parseInt(dobj.style.top+0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove=movemouse;
        return false;
      }
    }
    
    document.onmousedown=selectmouse;
    document.onmouseup=new Function("isdrag=false");
    Bilder werden so zugeordnet:
    Code:
    <img src="liste.gif" class="dragme">
    Falls es wichtig ist, ich hab das von hier: Klick
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Javascript Drag and Drop

    so ganz verstehe ich dein Anliegen nicht. Die Bilder lassen sich doch übereinander ziehen?
    Allgemein: Das Script ist hornalt, modernere Libs wie jquery sollten dein Vorhaben geschmeidiger umsetzen können.

  3. #3
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Javascript Drag and Drop

    Ich würde dafür auch zu einer Library raten. JQuery bietet beispielsweise fertige Draggable- und Droppable-Widgets.
    http://jqueryui.com/demos/droppable/
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  4. #4
    HTML Newbie
    Registriert seit
    08.05.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Javascript Drag and Drop

    Hallo liebe Community-Freunde,
    ich habe ein Problem. Ich habe leider nicht viel Ahnung von JavaScript sondern kenne nur das Grundgerüst. Ich möchte eine Drag & Drop Aufgabe erstellen. Das soll ungefähr so aussehen:
    Man soll ungefähr 5 TextBox haben und 3 ZielBoxen. Jeder der 5 Boxen sollen in eines der Ziele verschiebbar sein. Aber in jedem Ziel soll nur ein Text sein, dass heisst 2 TextBoxen müssen am Ende übrig bleiben. Durch einen Klick sollen die TextBoxen anwählbar sein, und erst nachdem sie angeklickt wurden, soll man sie verschieben können.
    Dann soll noch ein OK-Button sein, der dann als Popup-Fenster bzw. alert-Fenster einen Richtig oder Falsch ausgibt.
    Hat Jemand vielleicht eine Lösung für mich oder könnte mir dies erstellen?
    Ich wäre euch sehr dankbar.

    Liebe Grüße
    Julia

  5. #5
    HTML Newbie
    Registriert seit
    08.05.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Javascript Drag and Drop

    Hallo Freunde,
    Jquery bietet zwar fertige Draggable- und Droppable-Widgets aber ich brauche was, wo ich ein Objekt erst anwählen muss bevor ich dieses Objekt hin und her verschieben kann. Und es soll nicht überall hin verschiebbar sein, sondern nur zu den zugeordneten Targets.
    Beispiel:
    Ich habe eine Drag&Drop Aufgabenstellung:
    Ziel-Target für Grafik 1 verschiebbarer Grafik (Target 2)
    Ziel-Target für Grafik 2 verschiebbarer Grafik (Target 3)
    Ziel-Target für Grafik 3 verschiebbarer Grafik (Target 1)
    leer verschiebbarer Grafik (hat kein Ziel)
    leer verschiebbarer Grafik (hat kein Ziel)

    unter diese Tabelle soll dann ein Lösungsbutton stehen.
    Nach betätigen dieses Buttons soll entweder Richtig oder Falsch als Popupfenster erscheinen.
    Ist sowas machbar, bzw. kann mir da jemand eventuell ein ähnliches Tutorial zeigen ? Wäre super lieb.

    Liebe Grüße

    Julia

  6. #6
    HTML Newbie
    Registriert seit
    08.05.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Javascript Drag and Drop

    Hallo nochmal zusammen,

    hier ist etwa ein Beispiel:
    http://www.stevefenton.co.uk/Content...Drag-And-Drop/

    so in etwa soll das aussehen aber nur halt anders =)

    LG
    Julia

Ähnliche Themen

  1. Drag & Drop Upload
    Von FaFoo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 29.09.2010, 14:14
  2. msn - bilderversand per drag n drop
    Von Andy im Forum Computer - Internet Forum
    Antworten: 6
    Letzter Beitrag: 24.12.2009, 00:43
  3. Drag an Drop (speichern)
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 28.03.2009, 16:49
  4. 3D Rotation per Drag and Drop
    Von Stylefreak im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 26.10.2006, 13:26
  5. drag and drop
    Von BuntesAllerlei im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.10.2004, 13:45

Stichworte

Berechtigungen

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