Hola a todos
Necesito hacer que unos divs sean arrastrables dentro de otro div.
He encontrado este ejemplo que es justo eso:
http://www.thesmartpainting.co.uk/dragging/
Pero necesitaria que cada "CIUDAD" que voy soltando dentro del "DIV CONTENEDOR" se vaya guardando en un array. Digamos que si arrastro Barcelona y Madrid el array contiene [barcelona, madrid]
este es el codigo html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Demo 2: Drag and drop</title>
<?
$keywords = "Drag and drop script,DHTML drag and drop,drag,drop";
@include($_SERVER['DOCUMENT_ROOT']."/config/metatags.inc");
?>
<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
}
#leftColumn{
width:300px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}
#rightColumn{
width:200px;
float:right;
margin:2px;
height:400px;
}
.dragableBox{
cursor: hand;
width:100px;
border:1px solid #000;
background-color:#000;
color:#fff;
margin-bottom:5px;
text-align:center;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:white;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}
.clear{
clear:both;
}
img{
border:0px;
}
</style>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
</head>
<body>
<div id="header"><a href="/index.html"><img src="/images/heading3.gif"></a></div>
<div id="mainContainer">
<h2>ARRASTRA LAS CIUDADES AL DIV CONTENEDOR</h2>
<div id="leftColumn">
<p><b>CIUDADES</b></p>
<div id="dropContent">
<div class="dragableBox" id="box1">BARCELONA</div>
<div class="dragableBox" id="box2">CADIZ</div>
<div class="dragableBox" id="box3">MADRID</div>
<div class="dragableBox" id="box4">SEVILLA</div>
</div>
</div>
<div id="rightColumn">
<div id="dropBox" class="dropBox">
<p><b>DIV CONTENEDOR</b></p>
<div id="dropContent2"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="debug"></div>
<script type="text/javascript">
// Custom drop actions for <div id="dropBox"> and <div id="leftColumn">
function dropItems(idOfDraggedItem,targetId,x,y)
{
if(targetId=='dropBox'){ // Item dropped on <div id="dropBox">
var obj = document.getElementById(idOfDraggedItem);
if(obj.parentNode.id=='dropContent2')return;
document.getElementById('dropContent2').appendChil d(obj); // Appending dragged element as child of target box
}
if(targetId=='leftColumn'){ // Item dropped on <div id="leftColumn">
var obj = document.getElementById(idOfDraggedItem);
if(obj.parentNode.id=='dropContent')return;
document.getElementById('dropContent').appendChild (obj); // Appending dragged element as child of target box
}
}
function onDragFunction(cloneId,origId)
{
self.status = 'Started dragging element with id ' + cloneId;
var obj = document.getElementById(cloneId);
obj.style.border='1px solid #F00';
}
var dragDropObj = new DHTMLgoodies_dragDrop();
dragDropObj.addSource('box1',true,true,true,false, 'onDragFunction'); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true,true,true,false, 'onDragFunction'); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true,true,true,false, 'onDragFunction'); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true,true,true,false, 'onDragFunction'); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addTarget('dropBox','dropItems'); // Set <div id="dropBox"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('leftColumn','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init();
</script>
</body>
</html>
el codigo js es este:
http://www.thesmartpainting.co.uk/dr...drop-custom.js
aunque sea alguna pista para saber por donde empezar me seria util
gracias
