0
我對CSS和Jquery Sortables有挑戰。 我對jquery非常陌生，所以我不知道如何實現這一點。Jquery Sortables - Sub Menus
這裏是我們的目標：
- 要有父菜單的水平面。 父菜單可以通過從右向左拖動進行排序。 每個父菜單都有其自己的唯一ID。
- 每個父菜單可以有0-無限子菜單。
- 子菜單以垂直方式顯示。
- 子菜單可以分類（上下）
- 子菜單也可以移動到不同的父菜單。
我試圖與sortables和嵌套的UL做到這一點。我嘗試了連接列表，並且沒有任何工作=（
有人可以幫我一個簡單的3個父菜單，每個菜單有3個子菜單樣本 我的目標是能夠將子菜單移動到一個父級，重新水平面板安排父母。
後每個頁面上的表單中改變文本框得到所有菜單的序列化列表。
這裏是我到目前爲止所。 但是，沒有的jQuery代碼：
在此先感謝
弗蘭克
<style type="text/css">
body {
font-family: Arial;
font-size:12pt;
padding:20px;
width: 800px;
margin:auto;
border:solid 1px black;
padding-top: 20px;
margin-top:20px;
}
h1 {
font-size: 16pt;
}
h2 {
font-size: 13pt;
}
ul {
margin:0px;
padding:0px;
margin-left:20px;
}
.menuholder {
background-color:#000;
width:100%;
height:35px;
}
#AllMenus {
width:100%;
margin:0px;
padding:0px;
margin-left:0px;
list-style-type:none;
border:none;
font-size:10px;
}
#AllMenus li {
float:left;
min-width:100px;
border:none;
padding:0px;
margin:0px;
}
#AllMenus li div {
height:33px;
min-width:114px;
margin:0px;
border:solid 1px black;
text-align:center;
vertical-align:top;
}
.parentmenu_item {
width:100px;
background-color:#000;
color:#FFF;
border:1px solid black;
padding-top:10px;
padding-bottom:9px;
padding-right:6px;
padding-left:6px;
text-align:center;
display:block;
margin-bottom:0px;
border-right:#242424 1px solid;
vertical-align:top;
}
.placeHolder div {
background-color: #0FF !important;
border: dashed 1px gray !important;
width:53px;
}
#babylist, #babylist2, #babylist3, #babylist4 {
width:114px;
list-style-type: none;
margin:0px;
border:none;
padding:0px;
padding:none;
}
#babylist li, #babylist2 li, #babylist3 li, #babylist4 li {
float:left;
width:100px;
background-color:#333;
color:#CCC;
text-align:left;
padding:6px;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<h1>jQuery List DragSort Example</h1>
<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
<br/>
<h2>PARENT MENUS</h2>
<form name="sortForm" method="get">
<input name="ParentsortOrder" type="text" id="ParentsortOrder" size="100">
<button type="submit" class="submit3" name="submit"><span>Save & Continue...</span></button>
</form>
<div style="clear:both;"></div>
<br />
<br />
<div style="background-image:url(../Users/all/bkri/fs/phase_8.jpg); min-width:500px; height:500px; max-width:1920px;">
<div class="menuholder">
<!--For Background Menu Bar -->
<!--Menus List -->
<ul id="AllMenus">
<!--Top Menu -->
<li id="P1">
<div> <span class="parentmenu_item"> Menu 1 </span>
<!--Child Menus -->
<ul id="babylist">
<li id="s1"><span id="spandex">My Pictures </span></li>
<li id="s2"><span id="spandex">My Music </span></li>
<li id="s3"><span>My Docs </span></li>
<li id="s4"><span>My Friends </span></li>
<li id="s5"><span>My Books </span></li>
<li id="s6"><span>My Computer </span></li>
<li id="s7"><span>My Network </span></li>
<li id="s8"><span>My Test </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P2">
<div> <span class="parentmenu_item"> Menu 2 </span>
<!--Child Menus -->
<ul id="babylist2">
<li id="s9"><span>Milk</span></li>
<li id="s10"><span>Cheese </span></li>
<li id="s11"><span>Eggs </span></li>
<li id="s12"><span>Bacon </span></li>
<li id="s13"><span>Flour </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P3">
<div> <span class="parentmenu_item"> Menu 3 </span>
<!--Child Menus -->
<ul id="babylist3">
<li id="s14"><span>Cow</span></li>
<li id="s15"><span>Pig </span></li>
<li id="s16"><span>Horse </span></li>
<li id="s17"><span>Lamb </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P4">
<div> <span class="parentmenu_item"> Menu 4 </span>
<!--Child Menus -->
<ul id="babylist4">
<li id="s19"><span>Bob</span></li>
<li id="s20"><span>Kevin </span></li>
<li id="s21"><span>Nancy </span></li>
<li id="s22"><span>Stacy </span></li>
<li id="s23"><span>Rochelle </span></li>
</ul>
</div>
</li>
</ul>
</div> <!--End Top Menu Bkr -->
</div> <!--End Background -->
我喜歡你的解決方案很多。我可以使用你的代碼來彌補當前正在進行的一個項目。爲了更容易看到Ive將上面的代碼放在JSFiddle中。 http://jsfiddle.net/ZDZ5x/ 我的挑戰是試圖創建一個垂直菜單和這個水平版本。 – azzy81 2012-02-23 17:31:41
@SubstanceD，感謝jsFiddle。你是否能夠像想要的那樣讓菜單在側面工作？ – Frank 2012-04-13 13:16:56