[Resolvido] mover div com click do mouse

ktinho · Fevereiro 12, 2011

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.

William Bruno · Fevereiro 15, 2011

pesquise por drag and drop

ktinho · Fevereiro 16, 2011

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">
body {
   background: #eee;
}
#animado {
   background: #008;
   position: absolute;
   width: 200px;
   height: 200px;
   border: 1px solid #00f;
}
#animado h3 {
   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.

William Bruno · Fevereiro 16, 2011

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.

ktinho · Fevereiro 17, 2011

valew willian consegui parte doque precisava achei nesses sites:

http://stackoverflow.com/questions/3263374/click-to-move-a-div-to-the-mouse-co-ordinates

http://jsbin.com/ovape/3

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:

http://jwebsocket.org/

abrigado e até +

Entrar

Arquivado

[Resolvido] mover div com click do mouse

Recommended Posts

ktinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ktinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ktinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante