嵌套可排序无法工作(无拖放)
nested sortable not working(no drag and drop)
这里有我的列表和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>
您应该在文档中准备好以下部分:
$('ul').disableSelection().sortable({
从而变成:
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();
$('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();
}
});
});
希望这能帮助
相关文章:
- 拖放不会'不能使用EaselJS在chrome中工作
- 文件上载(拖放)无法工作
- 你如何让mootools拖放与触摸一起工作
- 我将如何让OpenLayers功能选择和Javascript拖放一起工作
- CKEDITOR 拖放插件集成在编辑器实例销毁并重新创建后停止工作
- JQuery 可排序、可拖动和可拖放不协同工作
- 让拖放开始工作
- 嵌套可排序无法工作(无拖放)
- Chrome拖放文件/文件夹不工作
- Android拖放事件在4.4.2的ionic中不工作
- 从本地存储拖放HTML5不工作
- HTML5拖放不能正常工作
- 拖放脚本只工作一次,但停止工作[没有jQuery]
- 事件.在拖放事件中,preventDefault和stoppropagation不像预期的那样工作
- 拖放不能正常工作
- 拖放事件不能与onload函数一起工作
- 不能让拖放和html5/javascript一起工作
- 使用JqueryUI拖放不工作
- JQuery拖放不工作在FF3.6后,我实现CSS3灵活的框布局,有什么想法
- Jquery UI排序与angularjs,如何防止水平拖放?轴:y不工作