renatoeufe/Demo-SignalR-MoverForma

## Demo-SignalR-MoverForma
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>SignalR - Mover Forma</title>
    <style>
        #forma
        {
            width: 50px;
            height: 50px;
            background-color: black;
            cursor: move;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="forma"></div>
</body>

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-1.1.1.min.js"></script>
<script src="/signalr/hubs"></script>
<script>
    $(function () {
        var hub = $.connection.formaHub,
            $forma = $('#forma');

        hub.client.moverForma = function (x, y) {
            $forma.css({ left: x, top: y });
        };

        $.connection.hub.start().done(function () {
            $forma.draggable({
                drag: function () {
                    hub.server.moverForma(this.offsetLeft, this.offsetTop || 0);
                }
            });
        });
    });
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>SignalR - Mover Forma</title>
	<style>
	#forma
	{
	width: 50px;
	height: 50px;
	background-color: black;
	cursor: move;
	border-radius: 50%;
	}
	</style>
	</head>
	<body>
	<div id="forma"></div>
	</body>

	<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-1.1.1.min.js"></script>
	<script src="/signalr/hubs"></script>
	<script>
	$(function () {
	var hub = $.connection.formaHub,
	$forma = $('#forma');

	hub.client.moverForma = function (x, y) {
	$forma.css({ left: x, top: y });
	};

	$.connection.hub.start().done(function () {
	$forma.draggable({
	drag: function () {
	hub.server.moverForma(this.offsetLeft, this.offsetTop \|\| 0);
	}
	});
	});
	});
	</script>
	</html>