javascript 基于条件的jQuery可拖动恢复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4302882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery draggable revert based on condition
提问by gautamlakum
I am having an issue related jQuery draggable and droppable. Here is description something what I want to do.
我有一个与 jQuery 可拖动和可放置相关的问题。这是描述我想做的事情。
First:I have two divs. One is <div id="selected">and another is <div id="container">. "container" has 10 <li>which are draggable and droppable into "selected". Here is code:
第一：我有两个 div。一个是<div id="selected">，另一个是<div id="container">。“容器”有 10 个<li>，它们可以拖放到“选定”中。这是代码：
<div id="selected">
<ul class="sortable-list">
</ul>
</div>
<div id="container">
<ul class="sortable-list">
<li>1</li>
<li>2</li>
<li>....</li>
<li>9</li>
<li>10</li>
</ul>
</div>
Second:I want to allow any 5 <li>s from "container" to "selected" div. If someone tries to add 6th <li>, then it must not allow user to it. That is the 6th <li>that is going to be inserted into "selected" must be reverted using jQuery draggable option revert.
第二：我想允许<li>从“容器”到“选定”div 的任何 5秒。如果有人试图添加 6th <li>，那么它一定不允许用户添加。那是<li>将要插入到“selected”中的第 6 个必须使用jQuery 可拖动选项 revert 还原。
i.e. $("#container li").draggable({ revert: true });Here is javascript code for that.
即$("#container li").draggable({ revert: true });这是 javascript 代码。
$(document).ready(function(){
var total = 0;
$("#selected").droppable({
drop: function() {
total = $("#selected li").length;
//alert(total);
if (total >= 5) {
$("#container li").draggable({ revert: true });
} else {
// below code is not working
$("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the <li> anywhere
}
}
});
});
This is working fine.
这工作正常。
Third:But when I drag an <li>from "selected" to "container", the "selected" div will have only 4 <li>s. So in this situation, later on user should be able to add another <li>into "selected" div from "container" div. But unfortunately it is not working. All the <li>s I try to drag and drop into "selected" are being reverted due to if (total >= 5 )condition.
第三：但是当我将一个<li>从“选定”拖到“容器”时，“选定”div 将只有 4<li>秒。因此，在这种情况下，稍后用户应该能够<li>从“容器”div中将另一个添加到“选定”div 中。但不幸的是它不起作用。<li>由于if (total >= 5 )条件，我尝试拖放到“选定”中的所有s 都将被还原。
Can anyone help me to solve this out using draggable revertoption? Please...
任何人都可以使用可拖动的还原选项帮助我解决这个问题吗？请...
回答by Nick Craver
You can use the acceptoptionwhich takes a function to do this much easier, like this:
您可以使用带有函数的accept选项来更轻松地完成此操作，如下所示：
$("#selected ul").droppable({
accept: function() {
return $("#selected li").length < 5;
}
});
You can test it out here. When you drag elements out, the .lengthgoes down and it'll accept elements again...no reason to get any more complicated :)
你可以在这里测试一下。当你拖出元素时，.length它会下降，它会再次接受元素......没有理由变得更复杂:)
回答by dxh
First of all, setting revertto false, will disable the revert function entirely. As you point out, you'll be able to drop the draggables anywhere. What you usually want is revert: 'invalid'which means that it'll revert whenever it's dropped on anything that isn't a droppable that accepts it.
首先，设置revert为false，将完全禁用还原功能。正如您所指出的，您可以将可拖动对象放置在任何地方。你通常想要的是revert: 'invalid'，这意味着它会在它被放到任何不是接受它的 droppable 的东西上时恢复。
What you want to do ought to be something like this:
你想要做的应该是这样的：
$('#selected').droppable({
drop: function() {
// since you're doing a full re-calc every time, this doesn't need to be global
var total = $("#selected li").length;
if(total >= 5) {
// once you've reached five, simply don't accept any more elements
// the rest will revert if dropped here
$('#selected').droppable('disable');
}
}
});
