Hallo,
ich möchte einige Bilder per Drag 'n' Drop in der Seite verschieben und in einem DIV-Element einrastet.
Hier mein Code:

HTML-Code:

function dragStart(e)
{
        MausX = document.all ? window.event.x : e.pageX;
        MausY = document.all ? window.event.y : e.pageY;
document.getElementById(e).Top = MausX;
document.getElementById(e).Left = MausY;
document.getElementById(e).style.border = '1px red solid';

}
function dragEnd(e)
{
document.getElementById(e).style.border = '1px green solid';
window.Status='Teil abgelegt.';
}

der Funktionier leider nicht.
Ich hoffe,diese Angaben reichen euch,wenn nicht;fragt mich per PN.
Danke für alle Hilfen.

http://www.webreference.com/programm...pt/mk/column2/

Das funktioniert bei mir irgend wie nicht.

Hier mein Code(JS)

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

document.onmousemove = mouseMove; document.onmouseup   = mouseUp;   var dragObject  = null; var mouseOffset = null;   function getMouseOffset(target, ev){     ev = ev || window.event;       var docPos    = getPosition(target);     var mousePos  = mouseCoords(ev);     return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; }   function getPosition(e){     var left = 0;     var top  = 0;       while (e.offsetParent){         left += e.offsetLeft;         top  += e.offsetTop;         e     = e.offsetParent;     }       left += e.offsetLeft;     top  += e.offsetTop;       return {x:left, y:top}; } function mouseCoords(ev){     if(ev.pageX || ev.pageY){         return {x:ev.pageX, y:ev.pageY};     }     return {         x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,         y:ev.clientY + document.body.scrollTop  - document.body.clientTop     }; }   function mouseMove(ev){     ev           = ev || window.event;     var mousePos = mouseCoords(ev);       if(dragObject){         dragObject.style.position = 'absolute';         dragObject.style.top      = mousePos.y - mouseOffset.y;         dragObject.style.left     = mousePos.x - mouseOffset.x;           return false;     } } function mouseUp(){     dragObject = null; }   function makeDraggable(item){     if(!item) return;     item.onmousedown = function(ev){         dragObject  = this;         mouseOffset = getMouseOffset(this, ev);         return false;     } } makeDraggable('p2');

Und HTML:

HTML-Code:

<span class="menu_a" onMouseUp="mouseUp()"  onMouseMove="mouseMove('p2')" id="p2">
<img src="8tagere1.jpg">
</span>

Aber wenn ich draufklicke und die Maus bewege und loslasse,hat es sich nicht gerührt.
Die Bilder sind in einem Scrollbaren DIV und sie sollen in ein anderes DIV gezogen werden.

Hi,

die Funktion makeDraggable erwartet das Objekt selbst als Parameter und keinen String. Da das Objekt jedoch erst nach dem Laden des Dokuments zur Verfügung steht, sollte die Routine im onload-Event aufgerufen werden.

Code :

1 2 3

window.onload = function(){   makeDraggable(document.getElementById('p2')); }

Weiterhin hat das Attribut onmousemove im SPAN-Tag nichts zu suchen.

Ciao
Quaese

Bei mir geht es irgendwie immernoch nicht.
Ich habe es so gemacht, wie Quaese.
Wenn es geht,macht mir bitte ein Beispiel.
Es sollte ein Span-Element bewegen können.

Hi,

hast du das SPAN-Element mit position: absolute entsprechend positioniert?

Ciao
Quaese

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;


diese beiden zeilen müssen hinter die deklaration der beiden entpsrechenden methoden, nicht davor.

Zitat von Quaese

Hi,

hast du das SPAN-Element mit position: absolute entsprechend positioniert?

Ciao
Quaese

Nö,das ist einfach in einem DIV,in dem auch andere Bilder sind.
Es geht irgendwie immer noch nicht.
hier mein Code

PHP-Code:

var dragObject  = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
    ev = ev || window.event;

    var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
    var left = 0;
    var top  = 0;

    while (e.offsetParent){
        left += e.offsetLeft;
        top  += e.offsetTop;
        e     = e.offsetParent;
    }

    left += e.offsetLeft;
    top  += e.offsetTop;

    return {x:left, y:top};
}
function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

function mouseMove(ev){
    ev           = ev || window.event;
    var mousePos = mouseCoords(ev);

    if(dragObject){
        dragObject.style.position = 'absolute';
        dragObject.style.top      = mousePos.y - mouseOffset.y;
        dragObject.style.left     = mousePos.x - mouseOffset.x;

        return false;
    }
}
function mouseUp(){
    dragObject = null;
}

function makeDraggable(item){
    if(!item) return;
    item.onmousedown = function(ev){
        dragObject  = this;
        mouseOffset = getMouseOffset(this, ev);
        return false;
    }
}
 document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
window.onload = function(){
  makeDraggable(document.getElementById('p2')); 


Hi,

in der Funktion mouseMove fehlen bei den Zuweisungen an top und left die Einheiten.

Code :

1 2	dragObject.style.top      = mousePos.y - mouseOffset.y[B] + "px"[/B];         dragObject.style.left     = mousePos.x - mouseOffset.x[B] + "px"[/B];

@OnlyFoo - die Position der Eventhandler im Dokument sollte hier eigentlich nicht entscheidend sein.

Ciao
Quaese

Hallo,es geht immer noch nicht richtig.
Wenn ich die linke Maustaste drücke und halte und die Maus bewege,rutscht das Bild ganz nach rechts und es geht immer so weiter.

Ok, die Position der EventHandler ist tatsächlich egal. Das verwundert mich allerdings stark... Warum ist das so? Die sind ja schließlich zu dem Zeitpunkt der zuweisung noch nicht definiert?

Code :

1 2	document.onmousemove = x; var x = function() { ... };

funktioniert erwartungsgemäß nicht.
Das mit den einheiten jedoch ist ebenfalls irrelevant.

Allerdings seh ich auch kein Problem mit dem Code, ich hab ihn gerad mal eben selbst getestet und es funktioniert bei mir im Firefox3 ohne Probleme. Nen andren Browser zum testen habe ich allerdings nicht hier...

Zitat von ts230

PHP-Code:

window.onload = function(){
  makeDraggable(document.getElementById('p2')); 


Da fehlt eine geschweifte Klammer am Ende.

Des Weiteren könnte es von Interesse sein, wo sich #p2 in der Knotenstruktur des Dokumentes befindet.

Die Klammer ist denk ich nur Copy&Paste Fehler, und die Knotenstruktur dürfte nicht so viel ausmachen, wegen der Schleife in getPosition

Zitat von Sven Mintel

Da fehlt eine geschweifte Klammer am Ende.

die habe ich auch drinne.Aber es ist immernoch das gleiche Verhalten wie Vorher.
Ich hoffe,dieses SCRIPT unterstützt das Elemente Von 1 zum anderem DIV gezogen werden können.

Zitat von Sven Mintel

Des Weiteren könnte es von Interesse sein, wo sich #p2 in der Knotenstruktur des Dokumentes befindet.

p2 befindet sich in einem DIV und nach dem JS.

Es wird wohl nichts bringen, wenn du nur sagst, dass es nicht geht, wenn es bei allen anderen geht...du wirst mit dem kompletten Sourcecode des Dokumentes zeigen müssen.