Drag&Drop Script

Commodore · 11 Juni 2006

Hallo Leute.

Ich hab mal ein kleiens bisschen JavaScript gecodet, und das ist dabei rausgekommen:

Code:

<html>
<head><title>Drag & Drop-Script</title>
<script type="text/javascript">
var test = 0;
function starte (){
window.document.onmousemove = weiter;
test = 0;
function weiter(evt){
if (test == 0){
document.getElementById('bild').style.top = evt.pageY;
document.getElementById('bild').style.left = evt.pageX;
window.document.onmousedown = ende;
}
}
}

function ende(evt){
test = 1;
var stelle = document.getElementById('bild').style.left;
var stelle3 = stelle.substring(0,stelle.length-2);
var breite = document.getElementById('bild').style.width;
var summe = stelle3 + breite;

var hohe = document.getElementById('bild').style.height;
var stelle2 = document.getElementById('bild').style.top;
var stelle4 = stelle2.substring(0,stelle2.length-2);
var summe2 = stelle4 + hohe;


if (evt.pageX > stelle3 && evt.pageX < summe){
if (evt.pageY > stelle4 && evt.pageY < summe2){
document.getElementById('bild').style.top = evt.pageY;
document.getElementById('bild').style.left = evt.pageX;
}
}
}
</script>
</head>
<body>
<div style="position:absolute; background-color:#FF0000; width:100px; height:200px;"  ondblClick="starte()" id="bild"></div>
</body>
</html>

Das ist ein halb fertiges Drag&Drop-Script (funktioniert glaube ich nur im FF).

Wenn man nun auf das bild doppelklickt, dann kann man es verschieben. Bei erneutem klicken bleibt es stehen.

Und jetzt mein Problem:

Wenn man auzf dem div doppelklickt, dann wird der Mauszeiger in die linke obere ecke verschoben, aber gibt es eine möglichkeit, dass sich das Mauszeiger nicht in die ecke geht, sich der div aber mit der Maus mitbewegt? ich habschon versucht bei der positionierung etwas zu subtrahieren, aber dann wollte sich der div nur noch in 2 statt in 4 richtungen bewegen.

Bitte keine Beispiele für andere Sripte, ich will ja was lernen

Wenn ihr mich nicht verstanden habt, dann einfach nachfragen.

EDIT: der thread ist schon auf der zweiten seite, daher einmal von mir gepusht. kann mir denn keiner helfen?

Artemis · 21 Juni 2006

Doch, ich. :-D

Ich hab ein wenig rumprobiert, und nun folgenden eigenen Code.
Bei Frage einfach fragen

.

HTML:

<html>
    <head>
        <title>Drag & Drop-Script</title>
        <script type="text/javascript">
            var objects = Array();
            var currentObject;
            var first;
            var diffX;
            var diffY;
            function dadStart(object)
            {
                objects[object] = true;
                currentObject = object;
                first = true;
                currentObject.style.border = '1px solid #000';
                window.document.onmousemove = dadMove;
                window.document.onmousedown = dadEnd;
            }
            function dadMove(evt)
            {
                if (first == true) {
                    diffX = evt.pageX - currentObject.style.left.substr(0, currentObject.style.left.length-2);
                    diffY = evt.pageY - currentObject.style.top.substr(0, currentObject.style.top.length-2);
                    first = false;
                }
                if (objects[currentObject] == true) {
                    currentObject.style.left = (evt.pageX - diffX) + 'px';
                    currentObject.style.top = (evt.pageY - diffY) + 'px';
                }
            }
            function dadEnd(evt)
            {
                if (currentObject != null) {
                    objects[currentObject] = false;
                    currentObject.style.border = 'none';
                    currentObject = null;
                }
            }
        </script>
    </head>
    <body>
        <div style="position:absolute; background-color:#f00; width:100px; height:100px; top:50px; left:50px;" onDblClick="javascript:dadStart(this)"></div>
        <div style="position:absolute; background-color:#0f0; width:100px; height:100px; top:250px; left:150px;" onDblClick="javascript:dadStart(this)"></div>
        <div style="position:absolute; background-color:#00f; width:100px; height:100px; top:100px; left:250px;" onDblClick="javascript:dadStart(this)"></div>
        <div style="position:absolute; background-color:#ff0; width:100px; height:100px; top:300px; left:350px;" onDblClick="javascript:dadStart(this)"></div>
    </body>
</html>

Hier als Demo:
---

w7 · 21 Juni 2006

@Artemis ich habe das ausprobiert --> es klappt bei mir im FF und IE nicht mit dem Wegziehen

Commodore · 21 Juni 2006

ok, das script funktioniert, und ich verstehe auch wie das funktioniert. in deinem script wird am anfang der funktion einmal die differenz zwischen der maus und dem rand der box ausprobiert. als ich das versucht habe auszugleichen habe ich das allerdings mitten in der funktion ausprobiert, was allerdings völliger schwachsinn ist.

danke ;Jump

@w7: dafür gibbet im ie den eventhandler "onDrag"

Artemis · 21 Juni 2006

@w7

im Firefox 1.5.0.4 funktionierts nicht? Ich hab 1.5.0.3 und da klappts und auch im Mozilla, Netscape und Opera, nur im IE nicht.

w7 · 21 Juni 2006

Artemis schrieb:
@w7

im Firefox 1.5.0.4 funktionierts nicht? Ich hab 1.5.0.3 und da klappts und auch im Mozilla, Netscape und Opera, nur im IE nicht.

dieses Skript sollte ja bewirken dass man die Körper verschieben kann oder? Bei mir klappt es trotz eingeschaltetem JS im IE 6.0 und FF nicht....

Schnuff · 21 Juni 2006

Tja, wer den IE noch benutzt, darf halt keine Extras erwarten ;D
Meine Site
Funktioniert auch nur im FF wirklich!
im Opera, halb und im IE, fast garnicht, von den Extras her...

Artemis · 21 Juni 2006

Klickst du auch am Anfang doppelt auf ein Div und nicht nur einfach?

w7 · 21 Juni 2006

Artemis schrieb:
Klickst du auch am Anfang doppelt auf ein Div und nicht nur einfach?

einfach und will es dann wie im WINExplorer wegziehen; es geht nicht...

Artemis · 21 Juni 2006

Dann ist es klar warum es nicht funktioniert. Bisher war es ein Doppelklick, den du machen musstest.

Jetzt habe ich das ganze noch einmal mit einem Einfach-Klick:

Edit: Hab das nochmal so geändert, dass beim verschieben immer die Aktuelle Position angezeigt wird.

HTML:

<html>
    <head>
        <title>Drag & Drop-Script</title>
        <script type="text/javascript">
            var move = Array();
            var time = Array();
            var currentObject;
            var first;
            var diffX;
            var diffY;
            function dadStart(object)
            {
                var now = new Date();
                if (time[object] == null) { time[object] = now.getMinutes()*60+now.getSeconds()-1; }
                if (now.getMinutes()*60+now.getSeconds() > time[object]) {
                    move[object] = true;
                    currentObject = object;
                    first = true;
                    currentObject.style.border = '1px solid #000';
                    currentObject.innerHTML = currentObject.style.left+', '+currentObject.style.top;
                    window.document.onmousemove = dadMove;
                    window.document.onmousedown = dadEnd;
                }
            }
            function dadMove(evt)
            {
                if (first == true) {
                    diffX = evt.pageX - currentObject.style.left.substr(0, currentObject.style.left.length-2);
                    diffY = evt.pageY - currentObject.style.top.substr(0, currentObject.style.top.length-2);
                    first = false;
                }
                if (move[currentObject] == true) {
                    currentObject.style.left = (evt.pageX - diffX) + 'px';
                    currentObject.style.top = (evt.pageY - diffY) + 'px';
                    currentObject.innerHTML = currentObject.style.left+', '+currentObject.style.top;
                }
            }
            function dadEnd(evt)
            {
                if (currentObject != null) {
                    var now = new Date();
                    time[currentObject] = now.getMinutes()*60+now.getSeconds();
                    move[currentObject] = false;
                    currentObject.style.border = 'none';
                    currentObject.innerHTML = '';
                    currentObject = null;
                }
            }
        </script>
    </head>
    <body>
        <div style="position:absolute; background-color:#f00; width:100px; height:100px; top:50px; left:50px; color:#fff;" onClick="javascript:dadStart(this)"></div>
        <div style="position:absolute; background-color:#0f0; width:100px; height:100px; top:250px; left:150px;" onClick="javascript:dadStart(this)"></div>
        <div style="position:absolute; background-color:#00f; width:100px; height:100px; top:100px; left:250px; color:#fff;" onClick="javascript:dadStart(this)"></div>
        <div style="position:absolute; background-color:#ff0; width:100px; height:100px; top:300px; left:350px;" onClick="javascript:dadStart(this)"></div>
    </body>
</html>

Demo: ---

Commodore · 21 Juni 2006

also die version mit einfachem klickfunktioniert überhaupt nicht. zumiondest nicht auf der beispielseite, aber anders habe ich das gar nicht erst probiert.

Artemis · 21 Juni 2006

Welcher Browser?

Commodore · 21 Juni 2006

ich benutze den ff (glaube version 1.5.0.2, das sagt der mir als letzte zahlenkombination am ende von navigator.useragent).

ich habs grade auch noch im ie ausprobiert, aber da wird dann nur die position des divs angezeigt.

dementia · 21 Juni 2006

Bei mir funktioniert es in IE, Netscape, FF und Opera (jeweils die neusten Versionen) einwandfrei!

mfg
edit: artemis, vllt solltest du eine gebrauchsanwesung für das skript schreiben. Einmal klicken und dann bewegen. So schwer?

Commodore · 21 Juni 2006

bin jetzt zwar ziemlich verwirrt, aber es funktioniert :?:

ziemlich seltsam...

aber wenns klappt, dann ists gut :-D

flapo · 21 Juni 2006

1. Einmal auf das gewünschte Viereck klicken.
2. Die Maus wieder loslassen
3. Das Viereck mit der Maus verschieben
4. Ist die gewünschte Position erreicht, noch einmal klicken und das Viereck ist wieder fixiert.

Verstehen?

Drag&Drop Script

Commodore

Guest

Artemis

Neues Mitglied

w7

Aktives Mitglied

Commodore

Guest

Artemis

Neues Mitglied

w7

Aktives Mitglied

Schnuff

Neues Mitglied

Artemis

Neues Mitglied

w7

Aktives Mitglied

Artemis

Neues Mitglied

Commodore

Guest

Artemis

Neues Mitglied

Commodore

Guest

dementia

Guest

Commodore

Guest

flapo

Neues Mitglied

Neueste Beiträge