Dragable Menu

by burn123

HTML

<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
<html>
<body>
<ul>
    <li><a data-address="home.php">Home</a>
    <li><a data-address="list.php">The List</a>
    <li><a data-address="common.php">Common</a>
    <li><a dada-address="quotes.php">Quotes</a>
    <li><a data-address="poems.php">Poems</a>
    <li><a data-address="photos.php">Photos</a>
</ul>
<div class="drag">
    <p>Drag a menu item over me!</p>
</div>
</body>
</html>

CSS

ul li {
    display:table;
    float:left;
}
@media screen and (min-width:480px) {ul li{width:33.33%;}}
@media screen and (max-width:479px) {ul li{width:50%;}}
@media screen and (max-width:195px) {ul li{width:100%;}}
ul li a {
  display:table-cell;
  vertical-align:middle;
  text-decoration:none;
  color: black;
  cursor:pointer;
}
ul:after{
  clear:both;
  content:'';
  display:table;
}
ul li:first-child a{background-color: green;}
ul li:nth-child(2) a{background-color: red;}
ul li:nth-child(3) a{background-color: #ff8400;}
ul li:nth-child(4) a{background-color: purple;}
ul li:nth-child(5) a{background-color: #49a7f3;}
ul li:last-child a{background-color: yellow; }
.drag, ul li a{
  text-align:center;
  height:56px;
  font:30px 'Caesar Dressing', cursive;
}
.drag {
  display:table;
  font-size:20px;
	margin:auto;
  cursor:default;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: -webkit-linear-gradient(to bottom, #e0e0e0 0%,#919191 50%,#e0e0e0 100%);
background: -moz-linear-gradient(to bottom, #e0e0e0 0%,#919191 50%,#e0e0e0 100%);
background: -o-linear-gradient(to bottom, #e0e0e0 0%,#919191 50%,#e0e0e0 100%);
background: -ms-linear-gradient(to bottom, #e0e0e0 0%,#919191 50%,#e0e0e0 100%);
background: linear-gradient(to bottom, #e0e0e0 0%,#919191 50%,#e0e0e0 100%);
}
.drag p{
  vertical-align:middle;
  display:table-cell;
}

JavaScript

$(function () {
    $("ul li").draggable({
        snap: ".drag",
        snapMode: "inner",
        revert: "invalid"
    });
    $(".drag").droppable({
        accept: "li",
        drop: function (event, ui) {
            location = $(ui.draggable).children('a').data('address');
        }
    });
    $(window).resize(function () {
        var drop = $('.drag');
        drop.width($('li').outerWidth() - parseInt(drop.css('borderLeftWidth'), 10) - parseInt(drop.css('borderRightWidth'), 10));
    }).resize();
});