Search and Top Navigation
Ticket #4249: test.html
File test.html, 0.7 KB (added by Evgeny, February 28, 2009 05:26AM UTC)
Just drag and drop
<html><head>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<style type="text/css">
DIV {
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<div id='drag' style='background-color: gray; '>Drag</div>
<div id='drop' style='background-color: green; left: 50%;'>Drop</div>
<div id='parent' style='background-color: red; height: 100px; width: 100px;left: 50%; top: 50%;'></div>
<script type="text/javascript">
$("#drag").draggable({opacity: 0.35, revert: true, zIndex: 2700, revertDuration: 1000 });
$("#drop").droppable({
drop: function(event, ui) {
$("#parent").append(ui.draggable);
}
});
</script>
</body></html>
Download in other formats:
Original Format
File test.html, 0.7 KB (added by Evgeny, February 28, 2009 05:26AM UTC)
Just drag and drop
<html><head>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<style type="text/css">
DIV {
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<div id='drag' style='background-color: gray; '>Drag</div>
<div id='drop' style='background-color: green; left: 50%;'>Drop</div>
<div id='parent' style='background-color: red; height: 100px; width: 100px;left: 50%; top: 50%;'></div>
<script type="text/javascript">
$("#drag").draggable({opacity: 0.35, revert: true, zIndex: 2700, revertDuration: 1000 });
$("#drop").droppable({
drop: function(event, ui) {
$("#parent").append(ui.draggable);
}
});
</script>
</body></html>