Tag: draggable

如何使div滑动到位

我有一个div，其中一个是可拖动的多个div，所以我如何在用户拖动第一个div时将剩余的div滑入它的位置 谢谢

在鼠标拖动时突出显示单行的表格单元格

我想要做的是允许用户在将鼠标拖过它们时突出显示表格中的单元格，非常像问题和答案中所述通过拖动选择表格上的单元格 我需要做的是限制跨越多列的拖动/突出显示效果。 例如，哪个列用户开始拖动事件，他们不能突出显示该列的一侧。 任何人对如何实现这一点都有任何想法？

如何动态添加列表元素在jquery中可拖动？

这是我的代码来自http://jsfiddle.net/XUFUQ/1/ $(document).ready(function() { addElements(); } ); function addElements() { $(“#list1”).empty().append( “Item 1″+ “Item 2″+ “Item 3” ); } $(function() { // there’s the gallery and the trash var $gallery = $( “#list1” ), $trash = $( “#list2” ); // let the gallery items be draggable $( “li”, $gallery ).draggable({ cancel: “button”, // these elements won’t […]

具有多个句柄的Jquery Draggable

是否可以使用具有多个手柄的draggable元素？ 我正在初始化它两次，每次使用不同的句柄参数，但它不起作用 – 只有第一个工作。

有没有办法让div通过jquery draggable 拖动时彼此不重叠？

有没有办法让div通过jquery draggable（）拖动时彼此不重叠？ 我有一堆用户可以拖动但我不能让它们相互重叠的div。 基本上我正在创建一个canvas，用户可以在网站上自由移动网站的内容，但移动时不需要重叠其他内容。 有任何想法吗？

Jquery draggable / droppable和sortable组合

我被要求创建一个正方形网格，其中每个正方形可能包含或不包含链接，这些链接应该能够围绕网格移动。 我认为draggable / droppable将是可行的方式并且它可以正常工作，但是，现在我们希望能够让draggables交换，如果一个被丢弃在另一个之上。 所以它现在看起来像是可以排序的。 但是，sortable看起来更像是列表的意思，而我没有像列表那样编写它。 有没有一种简单的方法来制作我到目前为止所做的工作，或者我是否需要使用可排序的方式完全重写它？ 我是javascript的新手，我花了一段时间才能做到这一点，而且我不是要求代码，但我担心必须重新计算整个事情！ 任何意见？ 这是我的代码的小提琴： http ： //jsfiddle.net/kvVkT/ 和代码： HTML 1 2 3 4 CSS #gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;} .droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;} .bookmark {float:left;width:65px; height:65px;display:block;position:absolute;} .position{float:left;width:65px; height:65px;display:block;} .position:hover{background-image:url(../img/tilehover.png);} .bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;} .draggable{ background:#888888;} [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: […]

Jquery拖延问题

基本上我想要的是，在拖动时，如果我走到收容区域外并释放鼠标，那么可拖动元素就会粘到我离开容器区域的边界。 当我将光标移回时，元素会回到光标处。 当你只是移动光标（而不是拖动）并且元素仍然被拖动时，它看起来并不好看。 这是一个小提琴。 只需拖动并将光标释放到输出区域外，您就可以得到我正在谈论的内容。 我在考虑两种方式 在被拖动时限制鼠标移动到包含区域（我搜索它并且没有找到如何做它。这可能不可能？） 如果光标离开容器区域，则将可拖动恢复到其位置。 （还是找不到办法做到这一点） 任何方式或更明亮的想法来实现这一点??? Relevant Code （用于stackoverflow）

如何在使用jQuery UI .draggable时禁用webkit浏览器中的文本选择？

在使用jQuery UI .draggable（）时，我似乎无法在webkit浏览器中禁用文本选择。 我尝试过各种组合使用webkit特定的css（-webkit-user-select和-webkit-user-drag），但没有运气。 这里有一个jsfiddle，你可以重现这个问题： http ： //jsfiddle.net/dmosher/8ZGLR/

jQuery-UI可拖动和可排序

所以我一直在使用这个例子： http ： //jqueryui.com/demos/draggable/#sortable我已经在我的产品上完成了它。 但是我想做两个重大改变。 我不希望第二个列表（在我的示例中为toList）可以自行排序。 我只希望它接受第一个列表中的项目（在我的例子中是fromList）。 当用户从第一个列表（fromList）拖动项目并将其放入第二个列表（toList）时，我希望该项目被强制到底部。 建议？ 这是我到目前为止所做的工作。 http://jsfiddle.net/CrtFD/

Draggables Jquery UI，在droppable上禁用单个div

我正在尝试建立一些教育网站，我希望学生们做的其中一件事就是将项目拖到某个区域，然后才能进入下一个阶段。 我是这样做的方法是使用jquery droppables脚本，并在droppable div中删除项目draggable选项禁用。 然后我将向变量添加1，当它到达正确的数字时，将启用前进按钮。 问题是我无法弄清楚如何使droppable函数仅适用于每个特定的draggable。 所以我拥有的是： $(document).ready(function() { $(“#draggable”).draggable(); $(“#draggable2”).draggable(); $(“#droppable”).droppable({ drop: function() { $( “#draggable” ).draggable( “option”, “disabled”, true );; } }); }); 有了这些div; Drop here Drag me Drag me 但是，当然，所有这一切都是禁用第一个可拖动的，只要有任何被拖入droppable div。 我的javascript不是很好（即时学习），我不知道如何让它只禁用我放入droppable区域的那个。 有人可以帮忙吗？