Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
como mover uma div com clicke do mouse eu tenho esse script que uma imagem acompanha o mouse mas eu nao sei qual funçao usar para que ao clickar em um lugar da pagina seja movido a imagem veja o script:
<html>
<head>
<title>HTML5 WebSocket Example with PHP5 Server</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var socket;
function dump(data) {
var content = '';
for (userId in data) {
if (data[userId].position) {
var pos = data[userId].position.split(',');
content += '<li class="user"><div class="icon" style="background:' + data[userId].color + ';"></div>' + data[userId].ip + ': ' + pos[0] + 'x' + pos[1] + '</li>';
}
}
$('#console ul').html(content);
}
function renderPosition(u, x, y, c) {
if ($('#'+u).length == 0) {
$('<div class="cursor" id="' + u + '"></div>').appendTo('body');
}
$('#'+u).css('left', x+'px');
$('#'+u).css('top', y+'px');
$('#'+u).css('background', c);
}
function send(x, y) {
var msg = x + ',' + y;
socket.send(msg);
}
function init() {
var host = "ws://localhost:8000/sockethtml5/server.php";
try {
socket = new WebSocket(host);
socket.onopen = function(msg){ };
socket.onmessage = function(msg){
if (msg.data) {
eval('var data = ' + msg.data + ';');
for (userId in data) {
if (data[userId].position) {
var pos = data[userId].position.split(',');
var color = data[userId].color;
renderPosition(userId, pos[0], pos[1], color);
}
}
dump(data);
}
};
socket.onclose = function(msg){ };
} catch(ex){ alert(ex); }
$('body').bind('mousemove', function(evt){
if (evt.clientX && evt.clientY) {
send(parseInt(evt.clientX), parseInt(evt.clientY));
}
});
}
</script>
<style type="text/css">
.cursor { position:absolute; left:0; top:0; width:100px; height:100px; background-image: url(321.gif); background-repeat: no-repeat; }
.icon { float:left; width:10px; height:10px; margin-right:5px; }
#console, #info { font:12px arial,helvetica,sans-serif; margin:20px; padding:20px; background:#f1f1f1; width:250px; }
#console { background:url(http://www.easevents.com/pdacamps/kamila/funny-cat.jpg) no-repeat center center; font-size:10px; height:250px; overflow:auto; }
#console ul { margin:0; padding:0; }
.user { background:#fff; padding:5px; list-style-type:none; }
h1 { font-size:20px; margin:0; }
h2 { margin:0 0 10px 0; }
button { position:absolute; right:0; bottom:0; font-size:20px; padding:5px 10px; margin:40px; }
</style>
</head>
<body id="body" onLoad="init()">
<div id="info">
<h1>HTML5 Websockets Test</h1>
<a href="http://bohuco.net/blog/2010/07/html5-websockets-example/">More Infos at bohuco.net/blog</a>
</div>
<div id="console">
<h2>Current Users ...</h2>
<ul></ul>
</div>
<button onClick="document.location = 'http://bohuco.net/blog/2010/07/html5-websockets-example/';">More Infos »</button>
</body>
</html>essa pagina se conecta com o servidor de socket mais eu nao sei abilitar uma funçao onclick para que mova a div.
mas eu sei arrastar e soltar eu quero clickar e a div ir para a cordenada que foi clickada, tipo quando voce clicka em um mapa de jogo. veja se compreende.
mais ou menos assim:
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="animado">
<h3>Este é uma DIV animada!!</h3>
</div>
</body>
</html>
<heady>
<style type="text/css"> background: #eee;
}
#animado {
background: #008;
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #00f;
} font-family: Verdana;
}
</style>
<script type="text/javascript">$left = 500;
$top = 400;
?>
$(document).ready(function() {
$("#animado").animate({left: <? echo $left; ?>, top: <? echo $top; ?>}, 2500);
});
</script>
</heady>só que eu quero um script que voce clicka na pagina e atribui para a variavel javascript as codenadas e o movimento sera feito depois colocarei outro que verifica se ja chegou a posiçao entende?
só que no codigo acima esta em php as variaveis quero colocar em javascript.
no evento onclick do document capture o objeto event
com ele, você conseguirá capturar onde o cara clicou.
pesquise sobre. Mas 'se você sabe arrastar e soltar', também deveria saber isso, pois parte do mesmo principio.
valew willian consegui parte doque precisava achei nesses sites:
http://stackoverflow.com/questions/3263374/click-to-move-a-div-to-the-mouse-co-ordinates
o segundo nao esta funcionando porque a jquery dele esta hospedada em um site fora do ar é só baixar a jquery que funcionara perfeitamente testado no explorer 6 e chrme 8 e opera 10 , segue o código para quem quiser fazer mover a div na pagina.
<html>
<!--
Created using http://jsbin.com
Source can be edited via http://jsbin.com/ovape/edit
-->
<head>
<title>neuro[tile]</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<style type="text/css">
body { margin: 0; }
div#menu { position: absolute; top: 0px; left: 0; width: 100%; height: 50px; background-color: #666; border-bottom: 1px solid #000; }
div#map-container { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; text-align: center; }
div#map { width: 800px; height: 400px; min-height: 400px; background-image: url(http://www.project-vanquish.co.cc/gridtest/grid.jpg); padding: 0px; margin: 0 auto; margin-top: 75px; }
div#character { top: 0px; left: 0px; width: 38px; height: 38px; min-height: 38px; border: 1px solid #666; background-color: #aaa; opacity:0.5; float: left; }
div#footer { position: absolute; bottom: 0px; left: 0; width: 100%; height: 50px; background-color: #666; border-bottom: 1px solid #000; }
</style>
</head>
<body>
<div id="menu">Menu</div>
<div id="map-container">
<div id="map">
<div id="character"></div>
</div>
</div>
<div id="footer">Footer</div>
<script> $(function() {
$("#character").draggable({ grid: [40, 40], containment: '#map' });
});
$(document).ready(function() {
$(document).bind('keydown',function(e){
switch(e.which) {
case 37: $('#character').animate({
left: '-=40'
}, 150, function() {
});
break;
case 39: $('#character').animate({
left: '+=40'
}, 150, function() {
});
break;
case 38: $('#character').animate({
top: '-=40'
}, 150, function() {
});
break;
case 40: $('#character').animate({
top: '+=40'
}, 150, function() {
});
break;
}
});
var mapTop = $('#map').offset().top;
var mapLeft = $('#map').offset().left;
var charWidth = $('#character').outerWidth();
var charHeight = $('#character').outerHeight();
$('#map').click(function(e) {
var mouseX = e.pageX - mapLeft - (charWidth/2); // convert absolute cooridnates
var mouseY = e.pageY - mapTop - (charHeight/2); // into relative ones...
mouseX = Math.round(mouseX/40)*40;
mouseY = Math.round(mouseY/40)*40;
$('#character').animate({
top: mouseY,
left: mouseX
})
});
});</script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1656750-13");
pageTracker._trackPageview();
</script><script src="/js/render/edit.js"></script>
</body>
</html>agora só preciso configurar para que o server de socket receba as conexoes.
alguem se abilita? mudei de servidor agora é do jwebsocket porque é compativel com ieca explorer 6 pra cima.
link pra quem quiser usar tem varias demonstraçoes inclusive um gamezinho:
abrigado e até +
pesquise por drag and drop