标签: droppable
让jQuery可排序,可放置和可拖动以协同工作
我正在尝试使用jQuery sortable,droppable和draggable来协同工作.我有3个列表:一个断点占位符; 报告行; 报告组.
用户应该能够:
- 将尽可能多的占位符副本拖到"报告行"列表中
- 将一个"报告组"(不是克隆)一次拖动到"报告行"集合中(但不是反之亦然)......直到不再有任何报告组为止.
- 用户应该能够对报告行列表进行排序.
我的问题是......
我无法让上面的2号工作
侧注:
我确实尝试为此创建一个jsFiddle,但无法让jsFiddle解析jQuery的UI文件...所以我必须在这里包含整个HTML页面....抱歉!
这是HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DragDrop Sample</title>
<link href="Includes/Css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="Includes/JavaScript/jQuery/Core/jquery-1.4.4.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.core.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.droppable.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.sortable.js" type="text/javascript"></script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 18px;
}
#myDiv
{
width: 500px;
}
.item
{
background-color: #DDDDDD;
border: solid 1px #777777;
margin: 2px;
width: 300px;
}
.breakPoint
{
background-color: #999966;
}
.placeHolder
{ …推荐指数
解决办法
查看次数
如何在drop事件jquery上获取被删除项的id
当我把东西丢给jquery droppable时,我想得到丢弃的项目的id.当我这样做的时候:
$("#here").droppable({
tolerance: 'fit',
accept: ".one",
drop: function(){
id = $(this).attr("id");
alert (id);
}
});
它当然提醒了droppable的id here.如何选择丢弃的div的id？
推荐指数
解决办法
查看次数
以编程方式将元素拖放到另一个元素上
使用jQuery UI,是否可以使用javascript执行拖放操作？
例子.单击链接后,将其#pony拖放到#box.我试过触发拖动事件,但这似乎不起作用:)
$('#pony').trigger('drag', [$('#box')]);
推荐指数
解决办法
查看次数
如何防止触发多个jQuery UI droppable？
我有一个jQuery UI可拖动和几个单独定义的droppables.由于配置了其中一个droppable tolerance: 'intersect',因此可以同时将多个dropppable拖放到drappable上.
什么是防止意外掉落射击的最佳方法？基本上,我想优先考虑droppables,以便在tolerance: 'intersect'触发另一个droppable时不会触发droppables.
更新 - 更多信息澄清事情:
tolerance: 'pointer'除了一类droppable之外,所有的droppable都被配置tolerance: 'intersect'.一类droppable的原因
tolerance: 'intersect'是droppables真的很窄,用户在找到它们时遇到了问题tolerance: 'pointer'.将落差器进一步拆开不是一种选择.
没有任何droppable重叠,但draggable足够大,可以与droppable重叠,
tolerance: 'intersect'而鼠标指针在另一个droppable上tolerance: 'pointer'.通过这种方式,最多可以同时触发两个可放置的放置点.UI被布局,因此
tolerance: 'intersect'如果已经触发了另一个可放置,则可以通过忽略可放置来确定用户的意图; 即,如果用户将鼠标指针移到了一个可放置的上面,可以tolerance: 'pointer'安全地假设他/她打算将它放在那里.问题是,我无法弄清楚如何忽略不需要的droppable.
推荐指数
解决办法
查看次数
Jquery UI draggable:如果Ctrl按下则克隆
我有一个可拖动的表格单元格列表,可以放到第二个表格上.它们被设置为克隆,因为如果从中拖动项目,原始表应保持不变.
现在我希望能够将第二个表内的已删除元素从一个单元格移动到另一个单元格.但是如果在拖动第二个表内的元素时按下Control键,则应克隆该元素.现在我不知道如何优雅地实现这最后一部分.
到目前为止,我的代码只缺少Ctrl部分的克隆:
$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
{
drop: function(event, ui) {
if (ui.draggable.hasClass("draggable")) {
ui.draggable.remove();
}
$('<div class="draggable"></div>').text(ui.draggable.text()).draggable({revert: "invalid"}).appendTo(this);
}
});
我想要实现的行为是,如果一个元素被拖动到表的另一个单元格,它应该被移动到那里.如果在按下Ctrl键的同时拖动元素,或者如果它是应始终克隆的多个预定义元素之一,则应创建元素的副本并将其插入目标单元格.
在我粘贴的代码中,我正在创建一个新元素,然后将其附加到droppable.这适用于克隆可拖动,但对于非克隆可拖动,原始拖动仍然存在,所以我最终复制它.
如果我只是将draggable附加到目标droppable,则可以从原始位置删除可拖动的克隆.
编辑: 我发现了问题,我使用的是ui.draggable,它指的是原始的draggable,而不是ui.helper,它指的是克隆的.我在这里添加最终的工作代码作为参考:
$(".drag_clone").draggable({helper: "clone"});
$(".draggable").draggable({revert: "invalid"});
$(".droppable").droppable(
{
hoverClass: 'ui-state-hover',
drop: function(event, ui) {
ui.helper.remove()
$('<div class="draggable"></div>').text(ui.draggable.text()).mousedown(function(event)
{$(this).draggable('option', {
helper : event.ctrlKey ? 'clone' : 'original' });
}).draggable({ revert: "invalid" }).appendTo(this);
}
});
推荐指数
解决办法
查看次数
如何将图像拖放到容器中,然后根据丢弃的内容更新容器？
我希望能够将图像拖动到两个容器(容器1和容器2)中的一个容器中.从那里,根据图像被丢弃到哪个容器,我想用数据库调用更新该容器(或者只更新我的一个表中的行).
我想使用http://jqueryui.com/demos/droppable/来实现这一点,但我不知道如何处理请求,以及如何让每个容器监听事件处理程序(删除图片).
我在下面画了一个非常糟糕的图解释我的意思:
推荐指数
解决办法
查看次数
使用网格恢复'无效'不会返回到jQuery UI Draggable的起始位置
简而言之,如果您使用draggable与网格并设置revert:'无效'可拖动项目,它们不会返回到您开始拖动它们的完全相同的位置.他们回到你开始拖动它们的地方附近......非常奇怪.
这可能是UI中的一个错误.如果是这样,有人知道是否有解决方法吗？
示例:http: //jsfiddle.net/n2AUv/11/
谢谢!约翰.
推荐指数
解决办法
查看次数
使用.droppable将jQuery UI删除到div中时删除元素
我试图找出如何做到这一点的逻辑.
我有很多只有CSS类名的图像,它们是动态创建的.
这些图像可以使用jQuery UI进行拖动 .draggable.
我需要一个"垃圾桶",当一个元素被拖入时,它被删除.
示例:http://jsfiddle.net/KWdcU/3/(设置为删除所有元素而不是拖入其中的元素)
代码:
<div class ="box">
<div class="stack">one</div>
<div class="stack">two</div>
</div>
<div id="trash">trash</div>?
$(function() {
$( ".stack" ).draggable();
});
$('#trash').droppable({
over: function() {
//alert('working!');
$('.box').remove();
}
});
推荐指数
解决办法
查看次数
如何使用 HTML5 使某些元素可拖动而其他元素可放置？
我想拖动一些元素并将其放入其他一些容器中。以下示例适用于既可拖动又可放置的对象
但是当我尝试使其中一些可拖动而其他仅可放置时，它不起作用
我知道如何使用 jQueryUI 来做到这一点，但我想使用纯 HTML5 来做同样的事情。
推荐指数
解决办法
查看次数
为什么我可以禁用,但无法启用可放置功能？
我只需要在一个下降区域中使用1个块,然后根据需要进行切换.为什么我可以禁用,但无法启用可放置功能？
$(this).droppable("option", "disabled", false);- 不起作用$(this).droppable("enable");- 不起作用- 禁用后启用droppable - 不起作用
这是我的代码:
$('.my_block').draggable({
revert: "invalid",
});
$('.free').droppable({
accept: ".my_block",
drop: function(ev, ui) {
$(this).removeClass("free");
$(this).addClass("1");
ui.draggable.appendTo($(this)).removeAttr('style');
$(this).droppable("disable");
},
out: function(ev, ui) {
$(this).droppable("enable");
$(this).removeClass("1");
$(this).addClass("free");
},
});
jsfiddle http://jsfiddle.net/4ABCN/2/
如何通过一个按钮将所有红色块恢复到主要位置？
推荐指数
解决办法
查看次数