Ergebnis 1 bis 10 von 10

Thema: Drag and Drop nur in eine Richtung

  1. #1
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    22
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard Drag and Drop nur in eine Richtung

    Hey,

    bin gerade dabei mich um ein Kartendesign zu kümmern.
    Dazu zählt, dass der User per Drag and Drop die Karte natürlich verschieben kann.

    Dazu gibt es folgende HTML Datei:
    HTML-Code:
    <html><head>
    
    <style type="text/css">* { margin: 0; padding: 0; }
    #map {width: 500px; height: 500px;  border: 2px groove #000; overflow: hidden; }
    #map #innerMap { width: 2500px; height: 2500px; border: 2px solid red; left: -20px; top: -90px; 
    position: relative; background: url('media/map.jpg') no-repeat 0 0 fixed; background-size: cover; }  
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/map.js"></script></head>
    <body onload="initEvents();">
    <div id="map">
    <div id="innerMap"></div>
    </div></body></html>
    Dabei ist das Element "map" der "Maincontainer" zum "halten" der Karte.
    InnerMap ist dabei die eigentliche Karte mit Image.

    Mein Problem ist nun, dass meine Map sich seltsamerweise nur in 2 Richtungen bewegt.
    Nur nach rechts und nach unten.
    Habe per console.log ein paar Ausgaben gemacht wohin die Karte eigentlich hinziehen müsste.

    Beispielsweise erhalte ich in der Konsole dann das Ergebniss "go to the left" 117x, eine Zeile unter der Ausgabe wird die innerMap sofort verschoben.
    Jedoch tut sich dort einfach nichts.

    Hier der JS Code dazu:

    Code:
    function drag(e) {
        if(dragObj == null) return;
    
    
        
        var dir = getDirection(e);
        
        switch(dir) {
            case "l":
                console.log("go to the left");
                document.getElementById("innerMap").style.left = ($("#innerMap").position().left - 2) + "px";
                break;
            case "r":
                console.log("go to the right");
                document.getElementById("innerMap").style.left = ($("#innerMap").position().left + 2) + "px";
                break;
            case "t":
                console.log("go to the top");
                document.getElementById("innerMap").style.top = ($("#innerMap").position().top - 2) + "px";
                break;
            case "b":
                console.log("go to the bottom");
                document.getElementById("innerMap").style.top = ($("#innerMap").position().top + 2) + "px";
                break;
            default:
                return;
        }
        
        xpos = e.clientX;
        ypos = e.clientY;
        
    }
    
    
    function getDirection(e) {
    
    
        var dir = "no";
    
    
        if(e.clientX > xpos) dir = "r";
        else if(e.clientX < xpos) dir = "l";
        else if(e.clientY > ypos) dir = "b";
        else if(e.clientY < ypos) dir = "t";
    
    
        return dir;
    }
    Ist natürlich nicht alles aber die Methoden start, stop, init habe ich jetzt einfach mal weggelassen. Das funzt ja auch alles.
    Hoffe mir kann jemand sagen wo da mein Denkfehler liegt.
    Aber an sich bekomme ich die korrekten Ausgaben, wohin sich die Karte bewegen soll, jedochbewegt sie sich wie gesagt nru nach unten und nach rechts :/


    lg
    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
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Warum nimmst du nicht lieber ein Canvas-Element, dass würde sich förmlich anbieten und du hast dabei noch viel mehr Möglichkeiten.

    Hast du auch eine online-Version dazu so dass man sich das mal näher ansehen kann.

  3. #3
    Samurai
    Themenstarter
    Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    22
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Leider noch nie gehört :/
    Nein, arbeite derzeit über localhost und kann das auch nirgends hochladen.
    Muss man erstmal Zustimmung vom Admin holen und das dauert 2 Wochen

    Hab den htdocs Ordner mal angehängt.
    Kannst es dir dort anschauen ^^

    Hab mir das canvas Element mal schnell angeschaut, beschreibe die Seite aber nicht mit HTML5 :/
    Bin bei 4^^
    Angehängte Dateien Angehängte Dateien
    Geändert von Bleistift (30.07.2013 um 11:45 Uhr)


  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Nimm einen Feehoster, davon gibt es etliche wenn du den Begriff in eine Suchmaschine eingibt. Ich werde bestimmt keine Datei herunterladen.

    Warum verwendest du veraltete Techniken, gibt es dafür einen speziellen Grund?
    Html5 ist mittlerweile Standard und das Canvas-Element wurde extra für solche Zwecke erfunden.

    - - - Aktualisiert - - -

    Ergänzung zu meinem vorherigen Beitrag:
    Du musst nicht mal alles selber erstellen, das haben schon andere gemacht und eine Auswahl findest du hier: http://www.canvasdemos.com/2009/02/23/world-map/

    DEMO unter http://concentriclivers.com/slippymap.html

  5. #5
    Samurai
    Themenstarter
    Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    22
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Danke wasn Freehoster ist weiß ich auch. Systemadmin sagt dir aber auch was, oder?
    Geblockte Ports vill. auch, daher auch der Antrag und die Wartezeit.

    Ich habe hier keine Frage gestellt von wegen bitte gibt mir Demos.
    Danke nein. Warum HTML4 veraltet ist versteh ich auch nicht ganz.
    Ich denke nur weil du vielleicht damit umgehen kannst o.s. heißt es nicht das alles andere veraltet ist.
    Ich denke mal, dass ich mit dem was ich kann genug anfangen kann.

    Also es besteht immernoch das gleiche Problem, dass die Ausgabe (die man auch im Quellcode sieht) erscheint,
    jedoch wird die Zeile dadrunter nicht ausgeführt.

    Wäre nett wenn mir dabei geholfen wird und nicht nur gesagt wird das es veraltet ist und ich Demos benutzen soll.

    Ich werd mal schauen ob ich da durch die Quellcodes steige aber an und für sich für eine kleine Beispielkarte die ich gerade machen will,
    reicht das eigentlich auch wenn es gerade noch etwas rumbuggt.

    #edit: Sieht das da oben irgendwie aus wie eine riesige Weltkarte?
    Es soll eine kleine Übung sein um später mal eine stink normale Spielkarte zu erstellen.

    Dennoch wärs nett, wenn jemand Hilfe zu meinem gestellten Problem hat.
    Geändert von Bleistift (30.07.2013 um 13:07 Uhr)


  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.900
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Drag and Drop nur in eine Richtung

    *räusper* (etwas offtopic)
    mal aus wikipedia, aber ich bin mir sicher, das wird auch woanders bestätigt werden.
    Laut dem Zeitplan des W3C soll HTML5 2014 offiziell verabschiedet, d. h. zu einer W3C Recommendation werden.
    nur weil etwas im last-call-status ist, heiss es nicht, dass aktuelle technologie bereits veraltet ist.
    und an newslettern sieht man zB auch dass html3 oder 4 noch ne daseinsberechtigung hat.

    fakt is, wenn der stift das mit nem bild lösen will/muss hat er dafür gründe und "veraltet ist html4 oder xhtml erst, wenns deprecated geschimpft wird und nicht mehr genutzt.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    nicht last call, sonder candidate recommandation ist der Status:
    http://www.w3.org/TR/html5/
    Die englische Wikipedia ist da besser als Infomationsquelle: http://en.wikipedia.org/wiki/HTML5#S...zation_process

    Genaugenommen ist jedoch last stable Version html 4.01, jedoch empfiehlt das W3C Html5 ruhig schon zu verwenden und auf Fallbacklösungen für ältere Browser zurückzugreifen.

    Im Grunde hast du natürlich recht, das Html 4.01 aktuell ist und nicht als depraced eingestuft wurde.

  8. #8
    Samurai
    Themenstarter
    Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    22
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Traurig!

    Es gibt ein Problem und es wird auf irgendwelchen Demos und Verweise von W3C geraten.
    Wenn ich mit JavaScript / HTML4 arbeite, habe ich wie synaptic schon sagte meine Gründe dafür.

    Davon mal abgesehen gibt es so viel Open Source Produkte die auch noch damit entwickelt werden.
    Also lasst mal euer Off-Topic sein, so ein Schwachsinn.
    Selbst wenn ich jetzt sage ich programmiere mit Assembler wäre das doch meine Sache oder würde da auch nur kommen ist zu alt?
    Es mal nett zu erwähnen, dass es neuere Techniken gibt, reicht komplett aus.
    Aber es ist unnötig sich darüber bei einer Problemstellung auszutauschen. Macht dafür dochn neues Forum auf...

    Konzentriert euch mal auf das gestellte Problem mit dem gleichen Engagement, wie herauszufinden ob irgendwas veraltet ist.
    Ansonsten spart euch eure Kommentare, danke.

    Wenn euch keine Lösung einfällt, ihr kein Willen habt in etwas anderem als dem Neustem zu helfen, dann geht doch einfach nicht in dieses Thread.
    Danke für eure Hilfe!


  9. #9
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Zitat Zitat von Bleistift Beitrag anzeigen
    Wenn ich mit JavaScript / HTML4 arbeite, habe ich wie synaptic schon sagte meine Gründe dafür.
    HTML 4.01 verwendet CSS 2.1 und das kennt kein background-size:cover, da es CSS3 ist.
    siehe => http://www.w3.org/TR/CSS2/colors.html

    Für eine Spielkarte ist Canvas das Mittel der Wahl und die Demo war ein Beispiel. Die dahinterliegende Karte hat mit der Funktionalität nur in sofern etwas zu tun als das es demonstrieren sollte, wie man etwas verschiebt, man hätte ebenso gut auch ein Bild mit festen Ausmaßen nehmen können.
    Schau mal wie lange Canvas schon unterstützt wird => http://caniuse.com/canvas

    Du kannst auch mit Tabellenlayout arbeiten, wirst damit aber immer mit Gegenwind rechnen müssen, da es nun mal nicht zu den besten Verfahren zählt.
    Wenn du Vorgaben hast, dann ist das in Ordnung. In Ordnung ist es aber nicht, wenn wir deine gestellten Aufgaben lösen, die du dann deinem Vorgesetzten als deine Lösung präsentierst.
    Denk also besser nochmal nach wie du das umsetzt und was daran eventuell falsch ist.
    Debuggen gehört schließlich zu den Grundaufgaben eines Programmierers(sofern man Javascript zu den Programmiersprachen dazu zählen mag).

    Ich gebe dir jetzt noch einen Tipp: Veschiebe das Hintergrundbild anstatt des Divs.

  10. #10
    Samurai
    Themenstarter
    Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    22
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Drag and Drop nur in eine Richtung

    Zitat Zitat von explanator Beitrag anzeigen
    Für eine Spielkarte ist Canvas das Mittel der Wahl und die Demo war ein Beispiel. Die dahinterliegende Karte hat mit der Funktionalität nur in sofern etwas zu tun als das es demonstrieren sollte, wie man etwas verschiebt, man hätte ebenso gut auch ein Bild mit festen Ausmaßen nehmen können.
    Schau mal wie lange Canvas schon unterstützt wird => http://caniuse.com/canvas
    Tut mir leid, dass wenn ich mit ein paar JS-Zeilen eine kleine Karte machen will, nicht auf eine Demo mit Weltkarte und Zoom zurückgreife, sorry wa ^^

    Zitat Zitat von explanator Beitrag anzeigen
    Du kannst auch mit Tabellenlayout arbeiten, wirst damit aber immer mit Gegenwind rechnen müssen, da es nun mal nicht zu den besten Verfahren zählt.
    Wo steht hier was von Tabellenlayouts? Sehe nix^^

    Zitat Zitat von explanator Beitrag anzeigen
    Wenn du Vorgaben hast, dann ist das in Ordnung. In Ordnung ist es aber nicht, wenn wir deine gestellten Aufgaben lösen, die du dann deinem Vorgesetzten als deine Lösung präsentierst.
    Hab ich davon je was gesagt, dass ich diese Lösung jemanden präsentieren muss? Nein, es ist nämlich auch nicht so.
    Und wo wird das denn zu eurer Lösung, wenn ihr mir bei einem Problem helft, versteh ich nicht ganz.
    Logischer wäre es zu sagen, wenn ich mir die Demos ziehe o.a. dass es dann nicht mehr meine Lösung wäre,
    was du btw. die ganze Zeit versuchst und nicht verstehst, dass ich einfach eine klitze kleine 2D-Karte machen möchte zur Übung.

    Zitat Zitat von explanator Beitrag anzeigen
    Denk also besser nochmal nach wie du das umsetzt und was daran eventuell falsch ist.
    Nichts ist daran falsch, Techniken zu benutzen die immernoch im Einsatz sind und mit denen ich besser umgehen kann.-

    Zitat Zitat von explanator Beitrag anzeigen
    Debuggen gehört schließlich zu den Grundaufgaben eines Programmierers(sofern man Javascript zu den Programmiersprachen dazu zählen mag).
    Mein Problem hast du dir aber schon durchgelesen und verstanden, ne?
    Ich habe eine Debugausgabe die mir ausgegeben wird, jedoch die Zeile drunter wird nicht ausgeführt.
    Also der Tipp zum Debuggen ist hier definitv falsch.

    Zitat Zitat von explanator Beitrag anzeigen
    Ich gebe dir jetzt noch einen Tipp: Veschiebe das Hintergrundbild anstatt des Divs.
    Das ist doch was, mit dem man anfangen kann. Das hättest du im ersten Beitrag schreiben können aber nein du weißt alles besser
    und meinst hier irgendwen zu bevormunden was er benutzen soll o.a.
    Ich habe keine Vorgaben, ich habe nur mein Wissen wo ich SELBER weiß was ich besser kann und womit ich mich beschäftigen möchte, scheint für dich ja schwierig zu verstehen sein.

    Hoffe, dass ich damit jetzt deine seltsamen Dinge die du hier in den Raum stellst geklärt habe.
    Zumal es immer die Entscheidung des Programmiers ist was er benutzt und wie.
    Ein normaler Verweis auf eine neuere Technik reicht aus, aber nein du musst ja halb drauf zwingen, dass man es so macht.
    Das ist sinnlos und undproduktiv, also lass sowas doch einfach mal, sogar wenn es schon 2 oder 3x erwähnt wurde.


Ähnliche Themen

  1. Drag and Drop Schwierigkeiten
    Von hysterie im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 26.11.2012, 20:06
  2. Javascript Drag and Drop
    Von Nyoko im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 08.05.2012, 12:16
  3. Drag & Drop Upload
    Von FaFoo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 29.09.2010, 13:14
  4. msn - bilderversand per drag n drop
    Von Andy im Forum Computer - Internet Forum
    Antworten: 6
    Letzter Beitrag: 23.12.2009, 23:43
  5. drag and drop
    Von BuntesAllerlei im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.10.2004, 12:45

Stichworte

Berechtigungen

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