jQuery div move to mouse
ik probeer met jquery een divje naar de positie te laten gaan waar ik klik.
het werkt alleen niet goed met animate, als ipv animate css neerzet werkt het wel gewoon goed maar anders blijft hij steeds maar raar bewegen naar plekken toe waar ik helemaal niet geklikt heb.
hier mijn js:
Code (php)
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
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
<script type="text/javascript">
$(document).ready(function()
{
$(".vakje").show();
var posX = 0;
var posY = 0;
$(document).mousemove(function(e)
{
$('#totaal').click(function()
{
posX = (e.pageX)-100;
posY = (e.pageY)-100;
$('#text').html(posX + ', ' + posY);
moveTo("vakje", posX, posY);
//alert(posX + ", " + posY);
});
});
function moveTo(div, positionX, positionY)
{
$("."+div).animate(
{
'margin-top': (positionY) + "px",
'margin-left': (positionX) + "px",
}, 100 );
}
});
</script>
$(document).ready(function()
{
$(".vakje").show();
var posX = 0;
var posY = 0;
$(document).mousemove(function(e)
{
$('#totaal').click(function()
{
posX = (e.pageX)-100;
posY = (e.pageY)-100;
$('#text').html(posX + ', ' + posY);
moveTo("vakje", posX, posY);
//alert(posX + ", " + posY);
});
});
function moveTo(div, positionX, positionY)
{
$("."+div).animate(
{
'margin-top': (positionY) + "px",
'margin-left': (positionX) + "px",
}, 100 );
}
});
</script>
.vakje is het divje die moet bewegen en #totaal is de div waarin het mag en #text is gewoon om te kijken wat de positie is
Toevoeging op 15/11/2010 21:27:05:
ik heb het al opgelost met hetvolgende:
Code (php)
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
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
$(document).ready(function()
{
function moveTo(div, positionX, positionY)
{
$("."+div).animate(
{
'margin-top': (positionY) + "px",
'margin-left': (positionX) + "px",
}, 100 );
}
var posX = 0;
var posY = 0;
$('#totaal').click(function(e)
{
posX = (e.pageX)-100;
posY = (e.pageY)-100;
$('#text').html(e.pageX +', '+ e.pageY);
moveTo("vakje", posX, posY);
});
});
{
function moveTo(div, positionX, positionY)
{
$("."+div).animate(
{
'margin-top': (positionY) + "px",
'margin-left': (positionX) + "px",
}, 100 );
}
var posX = 0;
var posY = 0;
$('#totaal').click(function(e)
{
posX = (e.pageX)-100;
posY = (e.pageY)-100;
$('#text').html(e.pageX +', '+ e.pageY);
moveTo("vakje", posX, posY);
});
});
Gewijzigd op 15/11/2010 20:14:16 door Vincent Huisman
Er zijn nog geen reacties op dit bericht.