•  
     

Arraste o carro - jQuery

jQuery UI inclui uma função .draggable() que possibilita que arrastemos qualquer elemento HTML - você pode clicar nele e movê-lo para qualquer lugar na página!

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="car">
<div id="top"></div>
<div id="bottom"></div>
<div id="fwheel"></div>
<div id="bwheel"></div>
</div> 
</body>
</html>


CSS

Código: Selecionar todos

#top {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: 5px;
    background-color: #cc0000;
    left: 25px;
}
#bottom {
	position: relative;
	height:25px;
	width: 100px;
	background-color: #cc0000;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	top: -25px;
}
#fwheel {
	position: relative;
	height:20px;
	width:20px;
	border-radius: 100%;
	background-color: black;
	top: -35px;
	left: 5px;
}
#bwheel {
	position: relative;
	height:20px;
	width:20px;
	border-radius: 100%;
	background-color: black;
	top: -55px;
	left: 75px;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('#car').mouseenter(function(){
$('#car').draggable();
});
});



Demo: http://jsfiddle.net/ubh1t84e/5/