Introduction:
Enable draggable functionality on any DOM element. Move the draggable
object by clicking on it with the mouse and dragging it anywhere within
the viewport.
Example:
<html>
<head>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<!-- CSS -->
<style type="text/css">
.drag {
width: 70px;
height: 70px;
line-height: 70px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
float: left;
margin-left: 5px;
text-align: center;
font-size: 12px;
}
#dragbasic {
width: 500px;
height: 150px;
border: 1px solid gray;
background-color: #E0F0FF;
}
#drag-x {
width: 500px;
height: 75px;
border: 1px solid gray;
background-color: #E0F0FF;
}
#drag-y {
width: 80px;
height: 300px;
border: 1px solid gray;
background-color: #E0F0FF;
float: left;
}
</style>
<!-- Javascript -->
<script>
$(function () {
/* basic */
$("#dragbasic div[id^='drag']").draggable({
containment: "#dragbasic",
stack: ".drag"
});
/* X axis only */
$("#drag-x div[id^='drag']").draggable({
containment: "#drag-x",
stack: ".drag",
axis: "x"
});
/* Y axis only */
$("#drag-y div[id^='drag']").draggable({
containment: "#drag-y",
stack: ".drag",
axis: "y"
});
/* make draggable div always on top */
$("div[id^='drag']").mousedown(function () {
$("div[id^='drag']").each(function () {
var seq = $(this).attr("id").replace("drag", "");
$(this).css('z-index', seq);
});
});
});
</script>
</head>
<!-- HTML -->
<body>
<div>
Y axis only</div>
<div id="drag-y">
<div class="drag" id="drag4" style="background-color: lightgreen;">
Drag me</div>
<div class="drag" id="drag5" style="background-color: lightyellow;">
Drag me</div>
</div>
<div style="float: left; margin-left: 30px;">
Basic
<br />
<div id="dragbasic">
<div class="drag" id="drag1" style="background-color: orange;">
Drag me</div>
</div>
X axis only
<br />
<div id="drag-x">
<div class="drag" id="drag2" style="background-color: orange;">
Drag me</div>
<div class="drag" id="drag3" style="background-color: lightblue;">
Drag me</div>
</div>
</div>
</body>
</html>
0 comments :
Post a Comment