ここに、2 つのサブメニューを含むリストがあります。
リストの要素を「ドラッグアンドドロップ」できない理由がわかりません。このスクリプトはインターネットで入手しましたが、すべてうまくいったと思います。おそらく、非常に簡単なものが見当たらず、申し訳ありません。
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style>
* {
font-family: Arial;
}
span {
cursor: move;
display: inline-block;
margin: 0 10px 10px 10px;
/* margin-bottom: -62px;*/
}
p {
margin: 0;
border-radius: 5px;
border: 1px solid #793D00;
padding: 10px;
height: 20px;
width: 180px;
}
.highlighter {
text-align: center;
cursor: move;
border-radius: 5px;
width: 200px;
height: 40px;
display: inline-block;
margin: 0px 10px 14px 10px;
padding: 0;
border: 1px dashed #000;
background:#FFFF91;
}
ul {
float: left;
list-style-type: none;
}
li {
position: relative;
/*z-index: 6;*/
}
ul li {
float: left;
display: block;
padding: 0 40px;
}
li ul {
float: none;
margin: 0;
}
ul li ul li {
float: none;
margin: 0;
padding: 0px;
}
li ul.ui-sortable {
min-height: 60px;
/*border: 1px solid #f00;*/
position: relative;
/*z-index: 5;*/
margin-top: 10px;
margin-left: 40px;
padding: 10px 0 0 0;
}
.ui-sortable-helper {
padding: 0;
margin: 0 10px 10px 10px;
}
ul.no-child {
margin-bottom: -73px;
}
</style>
<script>
$('ul').disableSelection().sortable({
connectWith: "ul",
tolerance: "pointer",
cursorAt: {
left: 40,
top: 20
},
cursor: "move",
opacity: 0.5,
placeholder: "highlighter",
helper: "clone",
revert: 200,
start: function(e, ui) {
if(ui.item.parent().hasClass("children-1")){
ui.item.parent("ul").removeClass("child").addClass("no-child");
}
},
stop: function(e, ui) {
mkUl();
}
});
function mkUl(){
$("ul").each(function(){
$(this).removeAttr("class");
var ulLevel = $(this).parents('ul').length+1;
$(this).addClass("ui-sortable no-child level_"+ulLevel);
var childC = $(this).children("li").size();
$(this).has("li").removeClass("no-child").addClass("child children-"+childC);
$(this).children("li:first").addClass("first");
$(this).children("li:last").addClass("last");
});
}
$(document).ready(function(){
mkUl();
});
</script>
</head>
<body>
<ul>
<li>
<span><p>menu 1</p>
<ul>
<li>
<span><p>submenu 1</p>
<ul></ul>
</span>
</li>
<li>
<span><p>submenu 2</p>
<ul></ul>
</span>
</li>
</ul>
</span>
</li>
<li>
<span><p>menu 2</p>
<ul>
<li>
<span><p>submenu 1</p>
<ul></ul>
</span>
</li>
<li>
<span><p>submenu 2</p>
<ul></ul>
</span>
</li>
</ul>
</span>
</li>
</ul>
</body>
</html>