Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Drag and Drop von Div's“

Sling

Nicht mehr ganz neu hier

Hey Leute ich bin es nochmal,

habe jetzt folgendes Problem ich möchte mehrere Divbox auf einer webseite via drag an drop verschieben. Habe auch nen Gutes script gefunden nur leider weiss ich nciht wie ich da eine zweite Div box dazu bekomme die sich genau so verschieben läst kann mir jemand Helfen?

Hier mein Erfolg bis jetzt


hier der inhalt der PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Administration</title>
<script type="text/javascript" src="drag1.js"></script>

<script type="text/javascript">
var dragObject, offsetX, isDragging=false;
window.onload = init;
document.onmousemove = mM;
document.onmouseup = mU;

function init() {
var ob = document.getElementById("dragObject");

ob.ondrag=function(){return false;};
ob.onselectstart=function(){return false;};

ob.style.left="-15px";
ob.style.top="100px";
ob.style.display="block";
}

function mD(ob,e) {
dragObject = ob;

if (window.event) e=window.event;

var dragX = parseInt(dragObject.style.left);

var mouseX = e.clientX;

offsetX = mouseX - dragX;

isDragging = true;

return false;
}

function mM(e) {
if (!isDragging) return;

if (window.event) e=window.event;

var newX = e.clientX - offsetX;

if(newX > 260)
{
newX = 260;
}

if(newX < -290)
{
newX = -290;
}

dragObject.style.left = newX + "px";

return false;
}

function mU() {
if (!isDragging) return;

isDragging = false;
return false;
}

</script>

<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="dragObject" onmousedown="mD(this,event)"></div>
<div id="dragObject2" onmousedown="mD(this,event)"></div>
</div>
</body>
</html>

und noch der der CSS
@charset "utf-8";
/* CSS Document */
#dragObject {
width: 280px;
height: 100px;
position: relative;
text-align: center;
display: none;
cursor: default;
background-color:#00F;
}

#dragObject2 {
width: 300px;
height: 100px;
position: relative;
text-align: center;
display: none;
cursor: default;
background-color:#000;
}
/* =FIXES
---------------------------------------------------------------------------------*/

/* border fix for MAC */
a {outline:0; -moz-outline:0;}

/* =TAGS
---------------------------------------------------------------------------------*/
table{
padding:0 0 0 0;
margin:0 0 0 0;
}

*{
padding: 0;
margin: 0;
border: 0;
}

html {
font-size: 85%;
}

html>body {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

body {
background-image:url(bilder/back.jpg);
background-repeat:repeat-y;
background-position:center;
background-color:#000000;
text-align:center;
behavior: url(csshover.htc);
}

h1{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#333333;
}
/* =DIVBOXEN
---------------------------------------------------------------------------------*/
#wrapper{
width:250px;
height:600px;
margin-left:auto;
margin-right:auto;
margin-top:120px;
background-color:#FFF
}

Ich hoffe es gibt wie immer gute hilfestellung
 

mrbuff76

Nicht mehr ganz neu hier

AW: Drag and Drop von Div's

Schau dir mal deinen Javascript-Teil genau an.
Da wird dir bestimmt auffallen, dass es da "...document.getElementById("dragObject");..." gibt.

Nun ja, wenn du jetzt ein klein wenig überlegst, dann hast du die Lösung, warum du nur einen Drag&Drop-fähigen DIV-Container hast...
 
Zuletzt bearbeitet:
S

scrump

Guest

AW: Drag and Drop von Div's

Mein Vorredner hat dir ja schon den richtigen Hinweis gegeben.

Und, du kannst doch nicht einfach auf
verlinken...
Wir haben deine Daten doch gar nicht auf unseren Rechnern ;)

Lad doch mal deine Daten auf deine Seite in einen separaten Ordner.

Gruß
 

Sling

Nicht mehr ganz neu hier

AW: Drag and Drop von Div's

Sry das mit dem Server habe ich verscheckt, falschen link genommen :D.

Hier der richtige:


ich habe jetzt folgendes gemacht mit dem javascript:

Habe eine zweite
window.onload = init2; eingebaut und bei
var ob = document.getElementById("dragObject");

auch das zweite dragObject eingefügt nun zeigt er mir nur das Zweite an.
Auf dem Server liegt jetzt die Variante, wo das erste Dragobjekt funktioniert. Nun möchte ich eigendlich nur darunter nur noch zwei davon aber irgendwie klappt das alles nicht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Administration</title>
<script type="text/javascript" src="drag1.js"></script>

<script type="text/javascript">
var dragObject, offsetX, isDragging=false;
window.onload = init;
window.onload = init2;
document.onmousemove = mM;
document.onmouseup = mU;

function init() {
var ob = document.getElementById("dragObject");

ob.ondrag=function(){return false;};
ob.onselectstart=function(){return false;};

ob.style.left="-15px";
ob.style.top="100px";
ob.style.display="block";
}

function init2() {
var ob = document.getElementById("dragObject2");

ob.ondrag=function(){return false;};
ob.onselectstart=function(){return false;};

ob.style.left="-15px";
ob.style.top="200px";
ob.style.display="block";
}

function mD(ob,e) {
dragObject = ob;

if (window.event) e=window.event;

var dragX = parseInt(dragObject.style.left);

var mouseX = e.clientX;

offsetX = mouseX - dragX;

isDragging = true;

return false;
}

function mM(e) {
if (!isDragging) return;

if (window.event) e=window.event;

var newX = e.clientX - offsetX;

if(newX > 260)
{
newX = 260;
}

if(newX < -290)
{
newX = -290;
}

dragObject.style.left = newX + "px";

return false;
}

function mU() {
if (!isDragging) return;

isDragging = false;
return false;
}

</script>

<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="dragObject" onmousedown="mD(this,event)"></div>
<div id="dragObject2" onmousedown="mD(this,event)"></div>
</div>
</body>
</html>
 

Sling

Nicht mehr ganz neu hier

AW: Drag and Drop von Div's

Gott ich bin so doof...

klar eure erläuterungen sind doch ganz logisch ich erstelle ja nur ein Objekt in der Function wie doof danke für den Gedanken tritt cya
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben