1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
|
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/ui.core.js"></script>
<script src="js/ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$(".draggable").draggable(
{
grid: [15, 15],
drag: function(event, ui) {
$(".draggable").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, ui.helper.attr('id'));
$(".draggable").css("opacity", "1.0"); // Full opacity when stopped
},
cursor: "move"
});
});
function saveCoords(x, y, el) {
request('POST','includes/save_coords_pc.inc.php','coords=ok&id='+ el + '&x='+ x + '&y=' + y,'ajax_content');
}
</script>
<STYLE type=text/css>
.draggable { width: 150px; height: 150px; padding: 0.5em; border:dashed #333333; }
.demo { width:750px; height:450px; border:dashed #000; };
</STYLE>
<DIV class=demo>
<DIV class=draggable id="1">
<P>Drag me around</P>
</DIV>
<DIV class=draggable id="2">
<P>Drag me around</P>
</DIV>
<DIV class=draggable id="3">
<P>Drag me around</P>
</DIV>
</DIV> |
Partager