jQuery nestedSortable阻止将元素拖动到顶层 [英] Jquery nestedSortable block the drag of an element to the top level
问题描述
我有两个问题，
-
此nestedSortable在此代码中不起作用，问题出在哪里?
-
我想阻止用户将子元素拖动到顶层(基础)，我知道该库不允许这样做，是否有调整之处?
这是我所有的代码:
<html>
<head>
<style>
html {
background-color: #eee;
}
body {
color: #333;
background-color: #fff;
font-size: 13px;
font-family: "Helvetica Neue", Corbel, "Nimbus Sans L", Helvetica, Arial, sans-serif;
padding: 2em 4em;
width: 860px;
margin: 0 auto;
}
pre, code {
font-size: 12px;
}
pre {
width: 100%;
overflow: auto;
}
small {
font-size: 90%;
}
small code {
font-size: 11px;
}
.placeholder {
background-color: #cfcfcf;
}
.ui-nestedSortable-error {
background:#fbe3e4;
color:#8a1f11;
}
ul{
margin: 0;
padding: 0;
padding-left: 30px;
}
ul.sortable, ul.sortable ul{
margin: 0 0 0 25px;
padding: 0;
list-style-type: none;
}
ul.sortable {
margin: 4em 0;
}
.sortable li {
margin: 7px 0 0 0;
padding: 0;
}
.sortable li div {
border: 1px solid black;
padding: 3px;
margin: 0;
cursor: move;
}
h1 {
font-size: 2em;
margin-bottom: 0;
}
h2 {
font-size: 1.2em;
font-weight: normal;
font-style: italic;
margin-top: .2em;
margin-bottom: 1.5em;
}
h3 {
font-size: 1em;
margin: 1em 0 .3em;;
}
p, ol, ul, pre, form {
margin-top: 0;
margin-bottom: 1em;
}
dl {
margin: 0;
}
dd {
margin: 0;
padding: 0 0 0 1.5em;
}
code {
background: #e5e5e5;
}
input {
vertical-align: text-bottom;
}
.notice {
color: #c33;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js' type='text/javascript'/>
<script src='http://mjsarfatti.com/sandbox/nestedSortable/jquery.ui.nestedSortable.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('ul.sortable').nestedSortable({
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
maxLevels: 3,
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div'
}); });
</script>
</head>
<body>
<ul class="sortable">
<li id="list_1"><div>Item 1</div> </li>
<li id="list_2"><div>Item 2</div> </li>
<ul>
<li id="list_3"><div>Sub Item 2.1</div> </li>
<li id="list_4"><div>Sub Item 2.2</div> </li>
<li id="list_5"><div>Sub Item 2.3</div> </li>
<li id="list_6"><div>Sub Item 2.4</div> </li>
</ul>
<li id="list_7" class="no-nest"><div>Item 3 (no-nesting)</div> </li>
<li id="list_8" class="no-nest"><div>Item 4 (no-nesting)</div> </li>
<li id="list_9"><div>Item 5</div> </li>
<li id="list_10"><div>Item 6</div> </li>
<ul>
<li id="list_11"><div>Sub Item 6.1</div> </li>
<li id="list_12" class="no-nest"><div>Sub Item 6.2 (no-nesting)</div> </li>
<li id="list_13"><div>Sub Item 6.3</div> </li>
<li id="list_14"><div>Sub Item 6.4</div> </li>
</ul> <li id="list_15"><div>Item 7</div> </li>
<li id="list_16"><div>Item 8</div> </li>
</ul>
</body>
</html>
谢谢！ :)
这是一个有效的示例 http://mjsarfatti.com/sandbox/nestedSortable/ 如果我只能完成这项工作，也许我可以在第二点上找更多的地方
我根据答案之一告诉我改变了图书馆，但是Firefox正在挂起，并且脚本没有响应
这是小提琴: http://jsfiddle.net/dAwEe/2/
有人有主意吗?
http://jsfiddle.net/dAwEe/3/我已经修复我的问题之一:嵌套的可排序js不好，包括:S
现在有人对第二个问题有个想法吗?
我用 Thanks ! :) EDIT : here is a working exemple http://mjsarfatti.com/sandbox/nestedSortable/
If I can only get this work, maybe I could look more for my second point EDIT 2 : I'Ve changed the library as one of the answer told me, but firefox is hanging and there's un unresponsive script Here is the fiddle : http://jsfiddle.net/dAwEe/2/ EDIT 3 : Someone have an idea ? EDIT 4 : http://jsfiddle.net/dAwEe/3/ I've fixed my problem one : The nested sortable js was not well include :S Now someone have an idea for the problem two ? I modified the code a little with 这篇关于jQuery nestedSortable阻止将元素拖动到顶层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！$.extend()稍微修改了代码，我想我走得很近-> $.extend() and I think I came pretty close --> http://jsfiddle.net/Galled/dAwEe/85/
