将jQuery Draggable的偏移问题转换为基于iFrame的Sortable [英] Offset issues with jQuery Draggable into an iFrame based Sortable

问题描述

我在解决与可拖动元素相关的偏移问题时遇到了一些麻烦，这些问题被放入iFrame中的可排序区域。

I'm having quite a bit of trouble resolving problems with offsets related to draggable elements being dropped into a sortable area within an iFrame.

以下是用于演示此处的问题的示例。

The following leaned-down example to demonstrates the problem here.

确保您的窗口保持相当窄，否则很难将元素放入iFrame中。显而易见的是，您无法拖动项目并将其拖放到指定位置，而是必须将最左边边框右侧的350像素拖动，然后可排序将接受可拖动项。

Make sure to keep your window fairly narrow, as otherwise it's very difficult to drop the elements into the iFrame at all. It should be pretty obvious that you cannot drag the item and drop it in the designated place, instead you must drag about 350 pixels to the right of the leftmost border, after which the sortable will accept the draggable.

我已经尝试了很多东西，但到目前为止我一直无法缩小问题的范围。我甚至不完全确定我理解问题的根源，只知道这将允许我编写一个可以纠正这个问题的插件。

I've tried quite a few things here already, but thus far I have been unable to narrow down the problem. I'm not even entirely sure I understand the source of the problem, just knowing that would allow me to possibly write a plugin that could correct this issue.

已经有了一些人之前曾问过这个问题，但提供的解决方案并不完全是生产准备，通常是简单的解决方法。我需要一些更全面的东西，这将完全消除偏移问题，并允许可排序的东西被类似于其他可排序的现有可排序元素的接收类型接收。

There have been a few people who've asked this question before, but the solutions offered are not exactly production-ready, usually simplistic workarounds. I need something more comprehensive here, something that will entirely eliminate the offset issue, and allow draggables to be received by sortables similar to how existing sortable elements are received by other sortables.

推荐答案

遗憾的是不支持。请参阅 https://bugs.jqueryui.com/ticket/15047

It's sadly not supported. See https://bugs.jqueryui.com/ticket/15047

要通过HTML5 sortables存档相同的内容，您可以使用RubaXa的可排序。请参阅
https://github.com/RubaXa/Sortable

To archive the same via HTML5 sortables you can use RubaXa's sortable. See https://github.com/RubaXa/Sortable

JavaScript配置如下：

The JavaScript is configured like this:

$('#inner-iframe').load(function () {

var elOuter = document.getElementById('outer-draggables');
Sortable.create(elOuter, {
    group: 'sortable-group'
});

var elInner = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable');
Sortable.create(elInner, {
    group: 'sortable-group'
});

var elInner2 = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable2');
Sortable.create(elInner2, {
    group: 'sortable-group'
});

}）;

参见 http://jsfiddle.net/vdyd3nhw/3/

这篇关于将jQuery Draggable的偏移问题转换为基于iFrame的Sortable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！