Drag 'n' Drop mit JS

ts230

ts230

Gesperrt
Hallo,
ich möchte einige Bilder per Drag 'n' Drop in der Seite verschieben und in einem DIV-Element einrastet.
Hier mein Code:
HTML: 
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.
 
Das funktioniert bei mir irgend wie nicht.

Hier mein Code(JS)
Code: 
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: 
<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: 
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.
 
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;


diese beiden zeilen müssen hinter die deklaration der beiden entpsrechenden methoden, nicht davor.
 
Quaese hat gesagt.:
Hi,

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

Ciao
Quaese
Zum Vergrößern anklicken....
Nö,das ist einfach in einem DIV,in dem auch andere Bilder sind.
Es geht irgendwie immer noch nicht.
hier mein Code
PHP: 
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'));
 
Zuletzt bearbeitet:
Hi,

in der Funktion mouseMove fehlen bei den Zuweisungen an top und left die Einheiten.
Code: 
        dragObject.style.top      = mousePos.y - mouseOffset.y + "px";
        dragObject.style.left     = mousePos.x - mouseOffset.x + "px";
@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.:suspekt::suspekt::suspekt:
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück