从子菜单 Jquery 中拖动菜单项元素答案

【问题标题】：Drag Menu Item element from Submenu Jquery从子菜单 Jquery 中拖动菜单项元素
【发布时间】：2016-12-22 20:20:40
【问题描述】：

我是Jquery 的菜鸟。我在xhtml 中创建了子菜单。

<p:panelMenu style="width:200px" id="menus">
                <p:submenu label="Add Control" styleClass="ctl-tiered-submenu-1"
                    rendered="true">
                    <p:menuitem value="Bilance" actionListener="#{myIndexBean.addControl}"/>
                    <p:separator />
                    <p:menuitem value="Average Salary" />
                </p:submenu>
</p:panelMenu>

现在我想要可拖动的MenuItem。我使用JQuery 创建了这个：

$(".ui-panelmenu-content").draggable({revert:true });

现在我有可拖动的MenuItem，但我不能将这个元素移到Submenu 之外。我该如何纠正这个问题？

【问题讨论】：

标签： javascript jquery xhtml

【解决方案1】：

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

【讨论】：

对不起，我的错误，我想把子菜单元素放在外面，而不是里面