我有两个可以拖放的列表框,我希望我的第二个列表框只允许第一个列表框中的 3 个列表项。我的问题是,当我达到限制时,计数器会起作用,但我收到此错误:
未捕获错误:无法在 初始化;尝试调用方法"禁用"
它允许它拖动 3 个以上的元素。我希望它停止在 3 个元素处,当我从第二个列表框中拖出时,它会减去计数器。
var counter = 0;
$("#listbox2").droppable({
drop: function(event, ui) {
if (counter <= 3) {
counter++;
$('#counter_text').text(counter);
}
if (counter === 3) {
$('#listbox2').droppable("disable");
$('#listbox1 li').draggable("disable");
}
}
})
$("#listbox1").droppable({
drop: function(event, ui) {
counter--;
$('#counter_text').text(counter);
}
})
Yu 只需初始化可拖动元素即可。这是一个工作示例(样式很糟糕,顺便说一句)
var counter = 0;
$('#counter_text').text(counter);
$('#listbox1 li').draggable({
stop: function(event, ui) {
$(this).css('left',0);
$(this).css('top',0);
}
});
$("#listbox2").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable);
if (counter <= 3) {
counter++;
$('#counter_text').text(counter);
}
if (counter === 3) {
$('#listbox2').droppable("disable");
$('#listbox1 li').draggable("disable");
}
},
hoverClass: 'hover'
});
$("#listbox1").droppable({
drop: function(event, ui) {
counter--;
if (counter<3) {
$("li").draggable("enable");
$('#listbox2').droppable("enable");
}
$('#counter_text').text(counter);
$(this).append(ui.draggable);
$(ui.draggable).draggable('enable');
},
hoverClass: 'hover'
});
ul {
border: solid 1px green;
padding: 5px;
height: 120px;
}
.hover {
background-color: #CFC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="counter_text"></div>
<ul id="listbox1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul id="listbox2">
</ul>
检查程序的执行流程:在尝试使用它做任何事情之前,请确保您确实已经初始化了插件(例如:调用$('#listbox1 li').draggable();
)。
drop 函数中,如果你这样做:
$('#list1').droppable("disable");
$('#list2 li').draggable("disable");
您将获得:
未捕获错误:无法在初始化之前调用可拖动的方法;试图调用方法"禁用"
我建议你在 timout 函数中做同样的事情,如下所示:
if ($('#list1 li').length >= 3) {
window.setTimeout(function() {
$('#list1').droppable("disable");
$('#list2 li').draggable("disable");
}, 100)
return false;
}
工作示例在这里