Jquery 拖放允许 2 个元素
Jquery drag and drop allow 2 elements
我在jquery的拖放中遇到了一些问题。我只想从每个"ul"中拖动 1 个元素。所以我想要的结果是红色框中的"测试"和"foo"。如何跟踪红色框中的元素?
这是代码:http://jsfiddle.net/9edge/CTpTr/
提前致谢
填写两个单独的计数器,每种项目类型一个(并为您的项目提供类以识别它们)。
使用 check() 函数检查您的限制,如果达到或未达到,则返回 true/false,使用 drop() 函数更新计数器。
$(function() {
var limit = 1;
var counter_test = 0;
var counter_foo = 0;
$("[id=drag]").draggable({
revert: "invalid"
});
$('#div1').droppable({
accept: function(item) {
if ($(item).hasClass('test')) {
if (counter_test >= limit) {
return false;
}
}
else {
if (counter_foo >= limit) {
return false;
}
}
return true;
},
drop: function(e, ui) {
if (ui.draggable.hasClass('test')) {
counter_test++;
}
else {
counter_foo++;
}
}
});
});
小提琴
新小提琴与 ID 固定
解决方案的想法:http://jsfiddle.net/CTpTr/23/。您只能放置 1 个测试元素和 1 个 foo 元素,然后您仍然可以拖放,但可放置元素中不接受拖放。
我更新了你的小提琴。稍微复杂一点的解决方案在这里:
http://jsfiddle.net/CTpTr/18/
如您所见,我从li
元素中删除了drag
id。id 在网页中应该是唯一的。您可以使用另一个选择器 ( #lists li
) 使这些元素可拖动。然后,我使用两个变量来跟踪在红色div中拖放的对象数量。第一个是"限制",第二个是"左"。
var limits = { test: 1, foo: 1}, left = 2;
limits
是每个列表中允许的元素数(基于自定义 HTML5 data-dragtype 属性),left
是允许的元素总数。因此,例如,如果您希望能够添加两个类型为"foo"的元素和一个类型为"test"的元素,则可以使用
var limits = { test: 1, foo: 2}, left = 3;
矿石,如果你想允许两个"foo"和一个"测试",但总共有两个元素,你可以使用
var limits = { test: 1, foo: 2}, left = 2;
如您所见,它比您要求的版本更灵活一些。
每次删除元素时,drop 事件处理程序都会检索带有 drg.draggable
的拖动元素(请注意函数的参数(e, drg)
)及其类型(带有 draggable.data('dragtype')
)。
$(function() {
var limits = { test: 1, foo: 1},
left = 2;
$("#lists li").draggable({
revert: "invalid"
});
$('#div1').droppable({
drop: function(e, drg) {
var draggable = $(drg.draggable),
dragtype = draggable.data('dragtype');
left -=1;
limits[dragtype] -= 1;
if (left == 0) {
$(this).droppable("disable");
$('#lists li').draggable("disable");
}
if (limits[dragtype] == 0){
$('li[data-dragtype=' + dragtype +']').draggable('disable');
}
}
});
});
因此,如果仅达到一种li
类型的限制,则可以使用 $('li[data-dragtype=' + dragtype +']').draggable('disable')
禁用该类型元素的拖动功能。
需要注意的一件重要事情是添加另一种类型的列表是多么容易。 例如,如果要添加li
类型为"bar"的元素,则可以添加如下所示的ul
元素
<ul class="bar">
<li data-dragtype="bar">bar1</li>
<li data-dragtype="bar">bar2</li>
<li data-dragtype="bar">bar3</li>
<li data-dragtype="bar">bar4</li>
</ul>
并相应地设置limits
和left
变量,而无需更改 drop 事件处理程序的代码。例如:
var limits = { test: 1, foo: 1, bar: 2}, left = 4;
- Jquery 拖放允许 2 个元素
- JavaScript拖放 - 防止元素拖放到另一个可拖放的元素中
- 区分不同的可拖放元素(jQuery 拖放)
- JavaScript/jQuery在两个iframe之间拖放元素
- 在单独的容器中拖放,并调整放置的元素的位置
- 拖放与拖动不同的元素
- 拖放具有触摸支持的元素
- 防止在使用JS拖放时将其放入子元素内
- EaselJS / canvas在拖放过程中更改元素焦点
- 是否可以使用 JavaScript 在 WebBrowser 中拖动 WPF 元素和句柄拖放
- 防止HTML5拖放功能多次放置同一元素
- 花式树拖放 - 获取当前元素
- 由javascript创建的HTML5拖放元素:
- 拖放 - 元素不会拖放
- 是否有最适合“拖放”Web应用程序的元素
- 在 JQuery UI 拖放后查找列表中元素的索引
- 使拖放的元素可放置,同时仍可拖动
- 使用HTML5拖放,有没有办法在保持拖动流的同时隐藏元素
- 如何使用HTML2canvas截取拖放元素的屏幕截图
- 从子元素拖放父元素