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
und noch der der CSS
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