May be you are using External JS and CSS file and giving wrong path in the root page.
You can use below code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
@import url("http:
.delete {
position: absolute;
left: 0px;
top: 0px;
padding-top: 20px;
padding-left: 10px;
height: 50px;
margin-right: 10px;
width: 1%;
}
.delete:hover {
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
width: 20%;
}
.days {
display: inline-block;
text-align: center;
width: 166px;
margin-top: 30px;
font-family: "Roboto";
font-weight: 400;
font-size: 15px;
}
ul {
float: left;
list-style: none;
margin-right: 10px;
margin-left: 10px;
}
.colcontent {
width: 1000px;
top: 100px;
height: 800px;
position: absolute;
}
.connectable_list1 {
width: 166px;
margin-bottom: 50px;
}
.connectable_list2 {
width: 800px;
margin-bottom: 50px;
}
.todo {
clear: both;
}
.asgn {
font-family: "Roboto";
font-weight: 300;
font-size: 13px;
position: relative;
float: left;
width: 146px;
height: 60px;
margin-bottom: 2px;
margin-right: 20px;
padding-left: 30px;
padding-top: 10px;
background-color: #E8E8E8;
}
.td {
position: relative;
float: left;
width: 146px;
height: 60px;
margin-bottom: 10px;
padding-top: 10px;
margin-right: 10px;
padding-left: 30px;
background-color: #E8E8E8;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<div class="headings">
<ul>
<li class="days">MONDAY</li>
<li class="days">TUESDAY</li>
<li class="days">Wednesday</li>
</ul>
</div>
<div class="colcontent">
<ul class="connectable_list1 connectedSortable">
<li class="asgn"><span class='delete' style="background-color: blue;"><a href='#'>x</a></span>
Assignment1</li>
<li class="asgn"><span class='delete' style="background-color: red;"><a href='#'>x</a></span>Assignment2</li>
<li class="asgn"><span class='delete' style="background-color: green;"><a href='#'>x</a></span>Assignment3</li>
<li class="asgn"><span class='delete' style="background-color: green;"><a href='#'>x</a></span>Assignment4</li>
</ul>
<ul class="connectable_list1 connectedSortable">
<li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment1</li>
<li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment2</li>
<li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment3</li>
<li class="asgn"><span class='delete'><a href='#'>x</a></span>Assignment4</li>
</ul>
<div>
<div class="todo">
<ul class="connectable_list2 connectedSortable">
<li class="td"><span class='delete'>x</span>Todo1</li>
<li class="td"><span class='delete'>x</span>Todo2</li>
<li class="td"><span class='delete'>x</span>Todo3</li>
<li class="td"><span class='delete'>x</span>Todo4</li>
</ul>
</div>
</div>
</div>
<script>
$(function () {
$('a').hide();
$(".delete").mouseenter(function () {
$(this).find('a').show();
});
$(".delete").mouseleave(function () {
$(this).find('a').hide();
});
$(".connectable_list1").sortable({
connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
connectWith: '.connectedSortable',
});
$('.delete').click(function () {
$(this).parent("li").slideUp(200);
});
('.delete').mouseOver(
function () {
$('a').show();
});
});
</script>
</body>
</html>