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

我是Jquery的总noob。我在xhtml中创建了子菜单。从子菜单中拖动菜单项元素Jquery

<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，但我不能的移出这个元素。我如何解决这个问题？

来源

2016-08-16 DanteVoronoi

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

来源

2016-08-16 13:06:40 satwick

对不起，我的错，我想取子元素之外，里面没有 – DanteVoronoi

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

回答

相关问题