Tag: jquery ui draggable

jQuery – 带缩放的可拖动div: 这是我的代码： http://jsfiddle.net/652nk/ HTML CSS #canvas { width:500px; height:250px; border:1px solid #444; zoom:0.7; } #dragme { width:100px; height:50px; background:#f30; } JS $(function(){ $(‘#dragme’).draggable({containment:’parent’}) }) 使用css zoom属性时出现了一个主要问题。目标可拖动div的位置与光标位置不协调。有没有干净简单的解决方案？我应该能够动态地改变缩放。

Jquery可在父框架和子框架之间进行排序和拖拽: 我试图在父框架和子框架之间实现jQuery Draggable | Droppable | Sortable。我有一个这样的原型，但有一些奇怪的行为发生 win = document.getElementById(‘frame’).contentWindow; element = win.document.getElementById(‘sortable’); $(element).sortable(); console.log(element); $( “#draggable” ).draggable({ connectToSortable: $(element), iframefix: true, helper: function() {return $(“”).css(‘background-color’,’red’);} }); iframe页面还包含 $(“#sortable”).sortable(); 这是jsfiddle http://jsfiddle.net/vxAzs/5/ 当我尝试将元素放在iframe上时，它工作正常，但是当我尝试对iframe上的元素进行排序时，元素会粘到我认为的两个页面的click事件上（所以在我点击两个父项之前它不会被删除和iframe）。我认为这与父和iframe中的.sortable（）调用有关，但如果我删除了droppable停止工作。

jQuery UI dropable事件的droppable fires on sortable: 我有一个可以放入（现有）可排序列表中的元素列表。当droppable元素被放入sortables时，我想修改该元素。我通过调用droppable的drop事件来做到这一点。但是当可排序元素在可排序内部排序时，似乎也会触发此drop事件。而且我只想在从外部插入时修改掉落的元素。 $(‘#sortable’).sortable().droppable({ // Drop should only fire when a draggable element is dropped into the sortables, // and NOT when the sortables themselves are sorted (without something being dragged into). drop: function(ev, ui){ $(ui.draggable).html(‘TEMPLATE’); } }); $(‘#draggables li’).draggable({ connectToSortable: ‘#sortable’, helper: ‘clone’, revert: ‘invalid’, cursor: ‘move’ }); 小提琴上的完整例子。如何在sortable中排序时修改drop-in元素而不修改它们？

错误jquery-ui draggable无法读取属性’msie’: 我有一些麻烦让工作jquery-ui拖延。我将与您分享我的解决方案，这是最好的解决方案吗？在开始我的实际工作之前，我只是插入它进行测试。和 $(‘img’).draggable(); 喜欢这里： http ： //jsbin.com/eqowet/2/ 但是我收到了一个错误：错误：未捕获的TypeError：无法读取未定义的属性“msie”。

jQuery UI Draggable的自定义帮助程序: 我有一个jQuery UI可拖动，我试图创建一个自定义帮助器，其中包含原始元素的一些但不是所有信息。这是我的可拖动元素; Name 12-12-2011 Another name 12-12-2011 和jQuery; $(“ul li”).draggable(function(){ helper: function(){ return $(“”); } }); 我们的想法是，在拖动时，用户将拥有一个仅包含名称但不包含时间元素的帮助程序。我的实际代码比这更复杂，所以我真正想要的是任何选择器，它允许我选择原始元素或它的副本，然后在其上做各种jQuery魔术（过滤元素，添加新元素，类等）然而，对于我的生活，我找不到这个，可拖得糟透的文件，＃jquery没有人会帮助我。有任何想法吗？提前致谢！

使用jQuery UI将元素拖动到另一个元素时交换元素: 我在页面上有一个元素排列： 1 2 3 4 5 6 我如何使用jQuery UI（Draggable / Droppable）来使它如果一个div被丢弃到另一个div上，它们交换位置？（如果它被拖到其他任何地方，它会恢复到原来的位置。）谢谢。

jQuery UI Draggable / Sortable – 获取对新项目的引用: 我使用jQuery UI Draggable / Sortable演示（http://jqueryui.com/demos/draggable/#sortable）作为我项目的基础。我需要获得对的引用，当可排序接收它时，它会被克隆到sortable中。我尝试了sortable的receive事件，但是它只提供了对原始draggable 的引用，而不是它的克隆。

在调整浏览器大小时，不断地在video上移动可resize/可拖动的图像: 我正在研究这个小提琴，当浏览器resize时，我想在video上不断地移动/调整图像大小（它本身可resize/可拖动图像）。我使用的HTML / CSS / JS代码片段是： HTML： CSS： .overlay { position:absolute; width:100%; height:100%; background:red; opacity:.5; display:none; } JS： $(function() { $(‘#wrapper’).draggable(); $(‘#image’).resizable({ start: function( event, ui ) { $(‘#overlay’).show(); }, stop: function( event, ui ) { $(‘#overlay’).hide(); } } ); }); 问题陈述：我想知道我应该在上面的JS代码中做出哪些更改，以便每当我调整浏览器大小时，可拖动/可resize的图像也应该不断移动。例如：让我们假设我将谷歌图像放在一个人的鼻子上全屏幕，如果我调整浏览器窗口大小，谷歌图像似乎不会停留在鼻子上，如小提琴https：// jsfiddle所示达网络/ obn4yph0 /嵌入/结果

当拖动元素并将其捕捉到另一个容器时，如何强制jquery将元素居中？: 我想要一些方形的可拖动物体（在这种情况下只是带有数字的盒子）能够捕捉到一些空的表格单元并捕捉到那些单元格的中心（空的td框），而不是（外部））边缘那些细胞，这似乎是默认情况下做的。这是我的剧本： $(document).ready(function () { $(“.inputs div”).draggable( { snap: “.spaces” }); }); 编辑：这是整个文件 Draggable .block { z-index:9999; cursor:move; } li { list-style:none; } tr { border: 2px solid black; } table { border: 2px solid black; } .inputs div { float:left; background-color:#FFFFFF; color:#004E66; font-size:x-large; margin:2px; padding:20px; border:1px solid black; } .spaces td { […]

如何使标题面板可排序: 报表设计器包含Bootstrap 3面板。面板包含div。我尝试使用panel-sortable排序的第1组和第2组标题面板（具有类panel-sortable ） $(“.panel-sortable”).sortable().disableSelection(); 面板顺序无法更改。将Group 2 header拖动到Group 1 header以更改其订单面板后，将恢复旧订单。如何使header1和2面板可排序，以便他们的订单可以更改？报告可以包含许多标题。如果还有其他方法可以对它们进行排序，那么代码可以重构以使用它。 $(function() { var startpos, selected = $([]), offset = { top: 0, left: 0 }; $(“.panel-sortable”).sortable().disableSelection(); $(“.designer-panel-body”).droppable({ accept: “.designer-field” }); $(“.designer-field”).draggable({ start: function(event, ui) { var $this = $(this); if ($this.hasClass(“ui-selected”)) { selected = $(“.ui-selected”).each(function() { var el = $(this); […]