Home/ Questions/Q 9169969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:57:07+00:00

How would you go about making a draggable menu using the jQuery UI that

  • 0

How would you go about making a draggable menu using the jQuery UI that allows you to drag content?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By using the data-address attribute, and some toying around with the code, I came up with this solution

    HTML

    <!doctype html>
<html>
<body>
<ul>
  <li><a href="javascript:void;" data-address="a.php">Blah</a>
  <li><a href="javascript:void;" data-address="b.php">Blah</a>
  <li><a href="javascript:void;" data-address="c.php">Blah</a>
  <li><a href="javascript:void;" data-address="d.php">Blah</a>
  <li><a href="javascript:void;" data-address="e.php">Blah</a>
  <li><a href="javascript:void;" data-address="f.php">Blah</a>
</ul>
<div class="ui-widget-header">
  <p>Drag a menu item over me!</p>
</div>
</body>
</html>

    CSS

    ul li {
display:inline-block;
position:relative;
text-align:center;
}
@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:block;
padding:20px 0;
text-decoration:none;
color: black;
text-transform:uppercase;
}
ul li:nth-child(1) 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:nth-child(6) a{background-color: yellow; }
.ui-widget-header {
height:56px;
padding:18px 0;
margin:auto !important;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

    jQuery

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

    Codepen

    • 0