Tag: draggable

Jquery UI Draggable对齐边缘: 我正在开发一个用户可以自定义自己的仪表板页面的项目。这意味着他们可以将组件拖到页面上并根据需要定位它们。为了获得一个漂亮的布局页面，我希望组件能够相互捕捉。此时我正在使用snap：true属性，它将组件放在彼此旁边。但是，我想在它们捕捉之后在组件之间留出一些空间。因此，它必须捕捉到另一个具有5像素间隙的组件，而不是捕捉到另一个组件的确切位置。有没有办法做到这一点？

jeditable意外触发嵌套项目上的Draggable: 我正在使用jquery-ui的draragable进行拖放，并且可以进行内联编辑。当我拖放一个也可编辑的元素时，在它被删除之后，jeditable开始并弹出“编辑模式”。如何禁用此行为？编辑 – 由于netsting而发生问题 – 请参阅此示例。我还添加了draggable混合，使示例更加真实（实际的真正问题是在我正在处理的这个网站）注意 – 即使这个问题因为赏金规则而得到了接受的答案，但问题仍未解决。

jQuery UI的可拖动和页面滚动: 我注意到当我使用jQuery UI的可拖动function时，我必须将元素向上/向下拖动到页面上它强制滚动。被拖动的元素似乎比我的鼠标光标跳跃（大约）两倍。这会导致非常不稳定的行为并使其几乎不可能使用。我的意思的一个例子可以在这里找到。 http://tinyurl.com/ae6g5qe 我甚至在jQuery UI网站上的示例代码中得到了这种行为。 http://jqueryui.com/draggable/#scroll 我猜测它正在使用鼠标移动和窗口滚动来增加元素的移动（因此两倍）。我即将深入研究jQuery UI的代码，看看我是否能找到任何东西，但我很好奇是否有其他人经历过这个或者它只是我？此外，如果有人 – 你有不知何故？

切换（隐藏/显示）可放置面板时jquery奇怪的行为: 根据此处发布的代码，我有几个可拖动/可隐藏的盒子： http ：//webdeveloperplus.com/jquery/saving-state-for-collapsible-drag-drop-panels/ 我还有一个区域列表，我可以拖动到这些框中的任何一个，然后对它们进行排序。这很好用。只有当我开始切换这些盒子或移动他们的位置时，事情才开始变得奇怪。例1 假设我有3个垂直堆叠的盒子： BOX1 BOX2 BOX3 块可以拖入（并排序）好。如果我然后将Box2移到Box1上方，那么订单现在是： BOX2 BOX1 BOX3 我无法将任何东西拖入Box2。我在Firebug中没有任何错误。什么都没发生。例2 如果我上面的盒子顺序相同（Box1，Box2，Box3）并且我“隐藏”了Box2的内容，我就无法将任何内容拖入Box3。如果我再次“显示”Box2，我可以拖入Box3而不是Box2 …… 如果我设置了以下框并隐藏Box3，我无法将任何内容拖入Box4和Box5。如果我然后显示Box3，我唯一无法拖入的框是Box3： BOX1 BOX2 BOX3 Box4 了Box5 你头脑中的任何想法？我正在使用通常的可拖动和可排序的函数（由于某种原因使用droppable和sortable可以放弃两次可抛出的事件 – 这个论坛上另一个用户注意到的一种奇怪现象）。我必须指出，当您启动此代码时，只加载了一个框，并单击按钮以创建新框。这是一个构建新框的function，并将其设置为可拖动/可排序区域。干杯:) –update ————————- 我创建了一个简化的视图，使用了大多数’webdeveloperplus’代码（本章的巨大荣誉）。它可以在这里找到：jsfiddle.net/gD94w/4（顺便说一下，我喜欢这个jsfiddle网站！）。您应该能够复制我的问题（将“项目”拖动到蓝色区域）。我想知道的任何想法！谢谢。

Firefox：无法拖动超链接的元素子项: 考虑以下标记： Foo Bar 现在将一个dragstart事件附加到sup元素： $(document).ready(function () { $(“sup”).on(‘dragstart’, function(e) { console.log(‘shikaka’); }); }); 这个活动永远不会开火。我一直在研究，在Firefox中，默认情况下链接是可拖动的，所以我认为这可能有效： $(document).ready(function () { $(“.link”).on(‘dragstart’, function(e) { e.preventDefault(); e.stopPropagation; //event return false; does not work. }); $(“sup”).on(‘dragstart’, function(e) { console.log(‘shikaka’); }); }); 并且，也不起作用。我甚至尝试了一些“疯狂”的东西，比如向孩子触发事件： $(“.link”).on(‘dragstart’, function (e) { e.preventDefault(); e.stopPropagation; $(this).find(‘sup’).trigger(‘dragstart’); }); 互联网上有一些post表明你也可以通过取消mousedown事件来禁用该事件。以上任何一个尝试使用dragenter和mousedown例子都具有相同的效果。我的问题是，有没有办法在firefox中“短路”默认事件，使其触发子元素的事件？或者，有没有办法只阻止父事件，但仍然能够拖动子元素？

如何从.ajax GET的结果中添加可拖动的列表项？: 我希望能够根据http://jqueryui.com/demos/droppable/#shopping-cart上的购物车示例，将自己的项目添加到从.ajax调用返回的产品数组中的可拖动列表中。我已经尝试了一些附加等等的变体来将它们放入列表中，所有这些都使它们“出现”，但是不可拖动。我一直在谷歌搜索这几天，并没有找到如何实现它的明确解释。我一直在寻找关于.live的答案，但这显然是一个不赞成使用的解决方案。这是我正在努力工作的基本代码。我已经遗漏了我做过的六次尝试，希望有人能给我最“正确”的做法，而不是试图改进我的一堆实验。如果重要，则在打开modal dialog表单时执行此代码。 $.ajax({ type: “POST”, url: “GetMyProducts.php”, data: dataString, dataType: “json”, success: function(data) { // data returned is: // {“product_id”: 10004, “product_name”: “DVD”}, // {“product_id”: 10040, “product_name”: “CD”}, // {“product_id”: 10059, “product_name”: “Blue-Ray”} $.each(data, function(i,item) { // WHAT do I do here to append my data as a draggable […]

多个jQuery UI元素的X和Y位置: 我试图使用jQuery UI收集多个可拖动元素的位置。目前我可以获得一个元素的位置，但是当我移动另一个元素时，两个位置都会改变。请有人协助我获取多个可拖动物品的单独位置。 http://codepen.io/anon/pen/nLGIl HTML Test 1 This is a test Test 2 This is a test CSS .dragThis { min-width: 50px; max-width: 300px; min-height: 50px; max-height: 400px; overflow: auto; padding: 10px; background: #efefef; border: 3px solid #ccc; border-radius: 10px; display: inline-block; position: absolute; top: 0px; left: 0px; z-index: 0; } .dragThis h2 { […]

是否有可能在另一个div下有一个Jquery Draggable对象: 我正在尝试创建一个模板系统，然后将上传的jpg放在模板上。测试示例： http://www.silverink.com/TEMP/jqueryTest/ 问题是我想在最顶层有一个掩码，但能够点击并拖动下层。目前我不得不点击该区域将其拉到前面然后拖动或将其放在透明的前面。任何想法或建议最受欢迎!!

jQuery draggable sortable，在删除元素上更改html: 我正在设计一个表单构建界面。所有可用字段都位于界面左侧的无序列表中，右侧有一个大的空无序列表，它将成为我的webform。使这个界面工作的“技巧”是将左侧的列表项转换为有效的html元素，方法是在将它们附加到右侧的可排序列表之前将html附加到droppable ui元素中。我有它…大多数…使用draggable（）和sortable（）。目前，我使用sortable的receive事件从draggable元素中获取id，我将其置于data（）块中以传递给update事件。从那里，我使用id元素进行ajax调用，确定它是什么类型的字段以及应该从后端添加哪些选项，构建元素，然后使用ui.item.html将其放入界面中，这是更新函数传递的元素。我的方法的问题是它在拖动元素时也会触发，这会导致选择元素在无意中附加到可排序列表时乱丢屏幕。显然，receive事件是仅在sort从连接列表中获取项目时触发的事件。但是，如果我尝试内部html ui.item元素，它会更改源列表，而不是所需的目标。当项目已经在右侧的网络表单列表中时，如果它们只是被排序，我绝对不想修改它们。有没有办法在连接的sortable()列表接收事件中访问和更改目标html？还有其他策略可以解决我的挑战吗？代码： Available Fields First Name Last Name Company Webform <input type="hidden" name="webform_id" id="webform_id" value="”> 和jQuery /***** Make webform fields draggable *****/ $( “.master_list li” ).draggable({ connectToSortable: “#webform_list”, helper: “clone”, revert: “invalid” }); /***** Make form elements sortable *****/ $( “#webform_list” ).sortable({ […]

Kendo Ui像windows桌面一样可以拖动: 我需要模拟拖放桌面图标，我这样做： $(“.draggable”).kendoDraggable({ container: $(“#desktop”), hint: function() { return $(“.draggable”).clone(); }, dragend: function(e) { console.log(e); console.log(e.currentTarget.attr(“src”)); e.currentTarget.css(“top”,eylocation); e.currentTarget.css(“left”,exlocation); } }); 但我不确定是否是一个很好的方式和拖动回滚效果打破了我的解决方案。 Hava是一个使用KendoUI（No Jquery UI draggable）执行此操作的简单方法。任何帮助！