将jQuery Draggable的偏移问题转换为基于iFrame的Sortable

时间:2016-01-21 03:53:05

标签: jquery jquery-ui iframe jquery-ui-draggable jquery-ui-sortable

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

以下示例演示了问题here

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

JavaScript的配置如下:

$('#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/