0

您将如何使用允许您拖动内容的jQuery UI制作可拖动菜单？

4

1 回答 1

0

通过使用data-address属性和一些代码，我想出了这个解决方案

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();
});

密码笔

于 2013-01-20T23:22:49.013 回答