<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title>Where have I been? - Demo</title>
<meta name="description" content="Where have I been?" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper:'clone',
containment: 'frame',
//When first dragged
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
objName = "#clonediv"+counter
$(objName).css({"left":pos.left,"top":pos.top});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
console.log(itemDragged)
$("#clonediv"+counter).addClass(itemDragged);
}
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="options">
<div>Network Device
<details>
<summary></summary>
<div id="drag1" class="drag"></div> <!-- end of drag1 -->
<div id="drag2" class="drag"></div> <!-- end of drag2 -->
</details>
</div> <!-- end of Network Device -->
<div>End devices
<details>
<summary></summary>
<div id="drag3" class="drag"></div> <!-- end of drag3 -->
<div id="drag4" class="drag"></div> <!-- end of drag4 -->
</details>
</div> <!-- end of End Device -->
</div><!-- end of options -->
<div id="frame">
</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>body {
text-align: center;
}
#wrapper {
text-align: left;
width: 720px;
margin-left: auto;
margin-right: auto;
}
#options{
width: 200px;
height:750px;
border:1px solid black;
float:left;
background-color: #84acb3;
}
#frame{
width:513px;
height:750px;
//background-image: url("../images/UK-Map.gif");
background-repeat: repeat-y;
background-position: 0 0;
border:1px solid black;
float:right;
}
#tbldevs{
border:1px solid black;
width:80%;
margin-left:50px;
margin-top:10px;
}
#tbldevs th{
text-align:center;
height:50px;
width:50px;
}
#tbldevs td{
height:50px;
}
#drag1 {
margin-left:15px;
margin-top:15px;
background-image: url("../images/1-wifi.png");
width:32px;
height:32px;
}
#drag2 {
margin-left:15px;
margin-top:15px;
background-image: url("../images/2-modem.png");
width:32px;
height:32px;
}
#drag3 {
margin-left:15px;
margin-top:15px;
background-image: url("../images/3-router.png");
width:32px;
height:32px;
}
#drag4 {
margin-left:15px;
margin-top:15px;
background-image: url("../images/4-network.png");
width:32px;
height:32px;
}
.ui-draggable-helperMoving {
border: 1px dotted #000;
padding: 6px;
background: #fff;
font-size: 1.2em;
width:100px;
height:100px;
}
.ui-draggable-helperStoped {
border: 1px solid #000;
width:5px;
height:5px;
}
/* classes for dragged stuff */
.dragged1 {
position:absolute;
background-image: url("../images/1-wifi.png");
width:32px;
height:32px;
}
.dragged2 {
position:absolute;
background-image: url("../images/2-modem.png");
width:32px;
height:32px;
}
.dragged3 {
position:absolute;
background-image: url("../images/3-router.png");
width:32px;
height:32px;
}
.dragged4 {
position:absolute;
background-image: url("../images/4-network.png");
width:32px;
height:32px;
}
#element{
border:1px solid red
}
Простой
