[Resolvido] mover div com click do mouse
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.
Discussão (4)
Carregando comentários...