基于条件的jQuery可拖动还原
我遇到了一个与 jQuery 可拖放相关的问题.这是描述我想做的事情.
首先:我有两个 div.一个是
<div id="container">
.container"有 10 个 <li>
可以拖放到selected"中.这是代码:<div id="selected"><ul class="可排序列表"></ul></div><div id="容器"><ul class="可排序列表"><li>1</li><li>2</li><li>....</li><li>9</li><li>10</li></ul></div>
第二:我想允许任何 5 个 <li>
s 从容器"到选定"div.如果有人试图添加第 6 个 <li>
,那么它一定不允许用户添加它.即第 6 个 <li>
必须使用 jQuery 可拖动选项 revert.
即$("#container li").draggable({ revert: true });
这是 javascript 代码.
$(document).ready(function(){变量总计 = 0;$("#selected").droppable({下降:函数(){总计 = $("#selected li").length;//警报(总计);如果(总数> = 5){$("#container li").draggable({ revert: true });} 别的 {//下面的代码不工作$("#container li").draggable({ revert: false });//这让整个功能变得很奇怪.我可以拖动所有的<li>任何地方}}});});
这工作正常.
第三:但是当我将一个 <li>
从selected"拖到container"时,selected"div 将只有 4 个 <li>
s.所以在这种情况下,稍后用户应该能够将另一个 <li>
从容器" div 添加到选定" div 中.但不幸的是,它不起作用.由于 if (total >= 5 )
条件,我尝试拖放到已选择"中的所有 <li>
都将被还原.
谁能帮我解决这个问题,使用 draggable revert 选项?请...
解决方案你可以使用accept
选项,它需要一个函数来更容易地做到这一点,像这样:
$("#selected ul").droppable({接受:函数(){return $("#selected li").length <5个;}});
你可以在这里测试一下.当您将元素拖出时,.length
会下降,它会再次接受元素...没有理由变得更复杂:)
I am having an issue related jQuery draggable and droppable. Here is description something what I want to do.
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 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.
i.e. $("#container li").draggable({ revert: true });
Here is javascript code for that.
$(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.
Can anyone help me to solve this out using draggable revert option? Please...
解决方案You can use the accept
option which takes a function to do this much easier, like this:
$("#selected ul").droppable({
accept: function() {
return $("#selected li").length < 5;
}
});
You can test it out here. When you drag elements out, the .length
goes down and it'll accept elements again...no reason to get any more complicated :)
相关文章