jquery - 防止项目拖到已取消的项目下方
问题描述
我正在使用 jquery Sortable,它为项目提供拖放功能。
但我想在底部限制一些项目,不想将它拖放到某个地方。所以,我搜索了 API 文档,发现了这个解决方案,非常好。但我仍然面临一个问题。如下:
$(function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
$('.sortable').sortable({ cancel: '.note' });
});
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul class="sortable">
<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>
<li id="item_5">Item 5</li>
<p class="note">This is a note only</p>
</ul>
如果您运行 jsfiddle,根据功能,我们不能拖放“这只是一个注释”行。但我们可以在这条固定线上上下移动其他项目。
所以,我的问题是
如何防止固定物品留在底部。我不想让任何项目拖到固定项目下方。?
解决方案
以您的方式第二次调用 Sortable 是重新初始化它。您需要像这样调用 Sortable :
$(function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
$('.sortable').sortable("option", "cancel", '.note');
});
一个问题,取消是期待一个元素,比如"p"
,而不是一个类。
如果您从与选择器匹配的元素开始,则阻止排序。
另一个问题是它<p>
不应该是<ul>
正确 HTML 语法的一部分。我建议如下:
$(function() {
$(".sortable").sortable({
cancel: "p"
});
$(".sortable").disableSelection();
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.sortable li,
.sortable p {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
}
.sortable li span {
position: absolute;
margin-left: -1.3em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
</ul>
<div class="sortable">
<p class="ui-state-default note">This is a Note</p>
</div>
这将使 Note 看起来像是列表的一部分,但不会以任何方式排序。
更新
$(function() {
$(".sortable").sortable({
items: "li:not(.note)"
});
$(".sortable").disableSelection();
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.sortable li,
.sortable p {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
}
.sortable li span {
position: absolute;
margin-left: -1.3em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default note">This is a Note</li>
</ul>
推荐阅读
- php - 计算php表内的总价
- mysql - 在 MySQL 表中使用带有 AUTOINCRETEMENT 的 BIGINT 列类型是否有任何缺点?
- jquery - 如何使用 Unobtrusive Ajax 使用 sweetalert 实现 data-ajax-confirm?
- php - 或 PDO 中的声明
- powershell - 如何使用 Start-Process 每 30 分钟使用隐藏窗口启动脚本
- function - 出现“脚本错误”并且找不到原因
- angular - 角度插值无法访问对象
- javascript - reduce 可以做 map 做的所有事情吗?
- node.js - 是否可以仅在用户登录时连接 Socket.io?
- r - 在列表的每个数据框中创建新列,并根据位置(R)从字符向量中填充字符串