Required files
1) index.php
2) html.inc
3) jquery-1.8.0.min.js
index.php
<?php
$pre = 1;
$content =’
<div id=”drag”>
<div>
<div>
<h4>Title 1</h4>
</div>
<div>Content 1</div>
</div>
<div>
<div>
<h4>Title 2</h4>
</div>
<div>Content 2</div>
</div>
<div>
<div>
<h4>Title 3</h4>
</div>
<div>Content 3</div>
</div>
</div>
<script type=”text/javascript” src=”jquery-1.8.0.min.js”></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(“#drag”).sortable({
connectWith: “.box”,
items: “.box”,
opacity: 0.5,
tolerance: “pointer”
});
</script>’;
$pre = 1;
include(“html.inc”);
?>
<style type=”text/css”>
*{
font-family:Tahoma, Geneva, sans-serif;
}
h4{
color:#FFF;
}
.drag{
width:100%;
margin:0 auto;
}
.box{
padding:10px;
min-height:160px;
text-align:justify;
border:0px #CCC solid;
margin:5px;
}
.box-head{
cursor:move;
}
.black{
border:#000000 1px solid;
}
.black h4{
background-color:#000000;
padding:10px;
}
.red{
border:1px #FF0000 solid;
}
.red h4{
background-color:#FF0000; padding:10px;
}
.blue{
border:#0000FF 1px solid; }
.blue h4{
background-color:#0000FF;
padding:10px;
}
</style>
< —————————————————————————–>
html.inc
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Drag & Drop Demo</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<style type=”text/css”>
img {border-width: 0}
* {font-family:’Lucida Grande’, sans-serif;}
</style>
</head>
<body onload=”changePagination(‘0′,’first’)”>
<!– Place this tag after the last badge tag. –>
<p>
<?php if(!isset($pre)) {?>
<pre>
<?php print_r($content); ?>
</pre>
<?php }else{ ?>
<?php print_r($content); ?>
<?php } ?>
</p>
</body>
</html>
