您好,请帮我第一次使用J查询Ne稳定。我想限制“管理”和“传输”选项卡不应拖动。 [在此处输入链接说明] [2] 左用户列表中的“用户”仅拖放到“角色”列表中的“管理”和“传输者”选项卡下方。
如何禁用仅对选定标签页的拖动功能
答案 0 :(得分:0)
看看JSFiddle:https://jsfiddle.net/1vcs0e47/
我已经通过演示链接https://dbushell.com/Nestable/
准备了此JSFiddle我所做的事情:
1)添加了一个输入元素,您可以在其中输入列表名称,例如“ Item 1”,“ Item 2”等。(注意:文本搜索区分大小写,此搜索文本仅用于演示目的,您可以实施比我使用的更好的搜索想法。)
2)在更改输入元素时,我们发现div具有“ dd-handle”类,并将css“ pointer-events”用作属性“ none”。参考:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
3)Draggable不会应用于指针事件被禁用的元素,我们也是如此。也使嵌套列表过于禁用。
4)给出了一个启用所有禁用列表的按钮,仅用于测试实例。
JS代码:
$(document).ready(function()
{
var updateOutput = function(e)
{
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
};
// activate Nestable for list 1
$('#nestable').nestable({
group: 1
})
.on('change', updateOutput);
// activate Nestable for list 2
$('#nestable2').nestable({
group: 1
})
.on('change', updateOutput);
// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
updateOutput($('#nestable2').data('output', $('#nestable2-output')));
$('#nestable-menu').on('click', function(e)
{
var target = $(e.target),
action = target.data('action');
if (action === 'expand-all') {
$('.dd').nestable('expandAll');
}
if (action === 'collapse-all') {
$('.dd').nestable('collapseAll');
}
});
$('#nestable3').nestable();
$('#disabled_listname').on('change', function()
{
var disabling_listname = $.trim($(this).val());
console.log('disabling_listname=', disabling_listname);
console.log('element length=', $('div.dd-handle:contains("'+ disabling_listname +'")').length);
if($('div.dd-handle:contains("'+ disabling_listname +'")').length > 0)
{
$('div.dd-handle:contains("'+ disabling_listname +'")').addClass('dd-handle-disable');
$('div.dd-handle:contains("'+ disabling_listname +'")').next('ol.dd-list').find('.dd-handle').addClass('dd-handle-disable');
}
if($('div.dd3-content:contains("'+ disabling_listname +'")').length > 0)
{ // just added this conditions for "Draggable Handles" example, only for demo purpose.
$('div.dd3-content:contains("'+ disabling_listname +'")').parent().addClass('dd-handle-disable');
$('div.dd3-content:contains("'+ disabling_listname +'")').next('ol.dd-list').find('.dd-handle').addClass('dd-handle-disable');
}
});
$('#enable_dragging').on('click', function()
{
$('.dd-handle-disable').removeClass('dd-handle-disable');
});
});