Ovako našao sam neku skriptu:
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
// Pozicija misa
var posx = 0;
var posy = 0;
function draginit() {
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
dragobjekt=null;
}
function drag(event) {
posx = document.all ? window.event.clientX : event.pageX;
posy = document.all ? window.event.clientY : event.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
</body>
</html>
Radi dobro, ali kako da je ograničim? Ne želim da se objekat pomera van granice preglednika.
Npr. da se ne dešava ovo:
Inače ne mora baš ova skripta, može i neka druga (npr. jqueryui.com/draggable/) samo je bitno da mogu da pomeram objekat i da ima ograničen prostor po kojem može da se kreće.
|