[JavaScript] verschieben von Bildern (Dragbild soll verschwinden)

Dieses Thema im Forum "Webentwicklung" wurde erstellt von HuNdI, 19. Januar 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 19. Januar 2009
    verschieben von Bildern (Dragbild soll verschwinden)

    Ich glaube ich erkläre besser erstmal was genau ich will.

    - Man klickt auf ein Bild und verschiebt dies dann (Im Browser)
    - Dabei erscheint ja eine transparente Bildvorschau, dort wo der Cursor sich befindet

    Ich weiß, das man iwie abstellen kann, das man diese Vorschau bekommt.
    Ich weiß aber nicht wie.

    Wenn jmd dies weiß bitte melden.


    P.S.: Ich habe ein Dragprogramm mit Java geschrieben, mit dem man Bilder verschieben kann, dort taucht aber immer das Problem auf, das diese Vorscau erscheint und man die Bilder nicht direkt verschieben kann.
     
  2. 19. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    so weit ich weiß ist das doch nur ein feature im firefox 3, oder?
    und das kann man dann eher nicht abstellen
     
  3. 19. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Es muss aber möglich sein, dazu hier mal eine Adresse:
    Dragable web content script | HotScripts Miscellaneous

    Dort wird dies auch verhindert.
    Leider konnte ich in diesem Quelltext noch nicht herausfinden wieso.
     
  4. 19. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    java oder javascript?

    falls javascript: poste es doch mal
     
  5. 19. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Java Script.
    Hier mein Code:

    Frubar Paste
     
  6. 19. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Also wenn ich das jetzt richtig verstanden habe, möchtest du die normale DragNDrop Funktion, aber halt ohne das beim ziehen die Vorschau erscheint?
    Dann ersetze einfach das:
    HTML:
    document.getElementById(drag_id).style.filter = "alpha(opacity=70)"
    document.getElementById(drag_id).style.opacity = ".70"
    
    durch das:
    HTML:
    document.getElementById(drag_id).style.filter = "alpha(opacity=0)"
    document.getElementById(drag_id).style.opacity = "0"
    
    Hierbei wird einfach die Vorschau unsichtbar, ist aber dennoch da bzw. an der Maus Position.

    MFG Ralphwiggum
     
  7. 20. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Es geht mir eher weniger darum, dass die Vorschau nicht zu sehen ist, sondern das sie nicht mehr da ist.

    Am besten ist dies zu erkennen in dem man einfach mal selben den Code testen (einfach Standard html, body & co drumsetzen dann klappts).

    Das Problem besteht nämlich darin, dass wenn ich versuche das Bild zu verschieben diese Vorschau dies erst einmal verhindert.
    Außerdem wird auch Drag 'n Drop per OneKlick verhindert.
    Man muss einmal klicken um das Bidl zu bewegen und dann erneut um es wieder abzulegen, sollte aber alles mit einem Klick funktionieren.
     
  8. 20. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    ach jetz, ich fass dein problem nochmal zusammen:

    du hast firefox3 und ein drag/drop script mit javascript erstellt.
    dein problem ist jetzt, dass firefox selbst schon so einen drag eingebaut hat, der dein script praktisch auser kraft setzt, da die zu bewegenden elemente auf dem selben platz bleiben und nur ein "geist" verschoben wird.

    dein problem ist im grunde garkein problem, denn es sieht eher danach aus als ob dein javascript überhaupt nicht funktioniert (ich habs auch ned getestet)

    wenn du mal auf script.aculo.us - web 2.0 javascript gehts, wirst du sehen, dass dieses "drag&drop" durchaus auch in firefox3/seamonkey2 funktioniert.
     
  9. 21. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Fast richtig.
    Von vornherein, das Script klappt soweit.

    Und das Javascript wird nicht außer Kraft gesetzt.. Nur wenn ich ein Element anklicke(Maus gedrückt halte) und dann verschieben will, dann kommt halt dieser Geist und in dem Moment kann mein Script nicht greifen, da man erst diesen Geist loswerden muss.
    Dies geschieht, indem man Maus wieder loslässt.

    Um dann aber weiter draggen zu können muss man erst wieder mit der Maus über das Bild gehen und nun kann man verschieben und mit einem weiteren Klick ablegen
     
  10. 21. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Kann sein, dass ich die falsch verstehe, aber auf der Seite kann ich die Elemente ebenfalls per Drag'n'Drop verschieben.

    In FF funktioniert diese DragDrop-Funktion nur, wenn die Bilder nicht als Hintergrundgrafik gesetzt sind. Hab nicht soviel Ahnung von Javascript. Dennoch könntest du -je nachdem wie du deine Bilder bei dir anordnest, die Bilder in 'ne Tabelle haun und sie als Backgroundgrafik setzen. Und dann einfach mit 'nem OnCLick/MouseDown bzw. MouseUp(?) - Ereignis arbeiten, welches dann dein Drag-Script ausführt, sobald du auf klickst bzw gedrückt hast .

    Dadurch, dass FF Hintergrundgrafiken ja nicht DragDrop erlaubt, wird somit nur dein Script ausgeführt, wenn du auf die entsprechenden Bilder klickst.

    Obs funktioniert weiß ich nicht. In der Theorie bin ich wesentlich besser
     
  11. 21. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    okay, hier hast nen workaround:
    HTML:
    <html>
    <head>
    <title>Drag-and-Drop</title>
    <script type="text/javascript">
    <!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4
    
    //Das Objekt, das gerade bewegt wird. - jetzt alle objekte die bewegt werden sollen
    var dragobject = [];
    
    // Position, an der das Objekt angeklickt wurde. - wird jetzt für jedes objekt
    // seperat gespeichert
    /*
    var dragx = 0;
    var dragy = 0;
    */
    
    // Mausposition
    var posx = 0;
    var posy = 0;
    
    
    function draginit() {
     // Initialisierung der Überwachung der Events
    
     document.onmousemove = drag;
     document.onmouseup = dragstop;
    }
    
    function dragstart(element) {
    //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
    
     if(element.nodeName == 'IMG') {
     var l = element.offsetLeft;
     var t = element.offsetTop;
     var w = element.offsetWidth;
     var h = element.offsetHeight;
     var dummy = document.createElement('div');
     dummy.style.cssText = 'position:absolute;'
     + 'width: ' + w + 'px;'
     + 'height: ' + h + 'px;'
     + 'top: ' + t + 'px;'
     + 'left: ' + l + 'px;'
     + 'background: url(' + element.src + ');';
     dummy.className = element.className || '';
     dummy.onmousedown = function() { dragstart(this); }
     element.parentNode.replaceChild(dummy, element);
     dragobject = [dummy, [posx - l, posy - t]];
     } else {
     dragobject = [element, [posx - element.offsetLeft, posy - element.offsetTop]];
     }
    }
    
    
    function dragstop() {
     //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
    
     dragobject = null;
    }
    
    
    function drag(ereignis) {
     //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
    
     posx = document.all ? window.event.clientX : ereignis.pageX;
     posy = document.all ? window.event.clientY : ereignis.pageY;
     
     if(!dragobject || !dragobject[0])
     return true;
     
     with(dragobject[0]) {
     style.left = (posx - dragobject[1][0]) + 'px';
     style.top = (posy - dragobject[1][1]) + 'px';
     }
     
     return true; //strict
    }
    //-->
    </script>
    </head>
    <body onload="draginit()">
    <div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
    <div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:200px;height:100px;width:100px;background:#00ff00"> </div>
    <img src="gb.png" onmousedown="dragstart(this);" />
    <img src="de.png" onmousedown="dragstart(this);" />
    </body>
    </html>
     
  12. 21. Januar 2009
    AW: verschieben von Bildern (Dragbild soll verschwinden)

    Danke sehr

    Jetzt muss ich das aber erstmal durchgehen


    Aber was mir schon aufgefallen ist.. Das klappt zwar aber auch nicht immer.. so 3 von 10 mal nicht.
    Dann erscheint selbes Problem wie zuvor.. nur ohne Geist.

    Trotzdem super
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.