Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help would be greatly appreciated. Thank you in advance.
HTML code:
<head>
<title>jQueryUI Draggable</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!--JqueryUI CSS-->
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<h1>jQueryUI Draggable</h1>
<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>
<div id="box4" class="box">Box 4</div>
</div>
<!--If CDN Fails to load, serve up the local version-->
<script src="js/jquery-3.2.0.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The normalize CSS file is a simple file for editing HTML as a default:
.box{
height:200px;
width:200px;
display:inline-block;
text-align: center;
line-height: 200px;
font-weight: bold;
color:white;
margin:0 20px;
}
#box1{
background:lightblue;
}
#box2{
background:lightgreen;
}
#box3{
background:purple;
}
#box4{
background:black;
}
.box:hover{
cursor:pointer;
}
jQuery UI code:
$(function(){
$('.box').draggable();
});