como mover uma div com clicke do mouse? eu tenho esse script que uma imagem acompanha o mouse mas eu não 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>
preciso que a imagem mova ao clickar ao invez de seguir o mouse mas cassei e não achei uma funçao que faça isso alguém me ajuda?
Pergunta
ktinho
como mover uma div com clicke do mouse? eu tenho esse script que uma imagem acompanha o mouse mas eu não 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>preciso que a imagem mova ao clickar ao invez de seguir o mouse mas cassei e não achei uma funçao que faça isso alguém me ajuda?
Link para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.