Question

所以我试图使用jQuery UI将div从一个连接的可排序容器转移到另一个容器。这听起来很简单虽然我正在尝试这样做，而内容区域正在滑动到下一个区域（认为iPad / iPhone跳板）。

问题是当将div容器拖过来时，它们会失去定位，所以拖动变得“跳跃”，因为它不会留在一个地方。

这是我到目前为止所做的:(尝试将一个块拖到右边，你会看到问题）

更新：Na7coldwater已表示会给出一个位置：绝对;这有助于解决这个问题，但在动画期间，这个区块仍然会消失。

我最终的目标是让块在网格类型布局中以最大值间隔开，例如每个区域4个。然后，如果需要，应该创建一个新的幻灯片区域（例如，没有更多的空间用于块，将出现第三个幻灯片区域）。显然我离这个很远，因为我甚至无法弄清楚如何以稳定，平稳的方式将区块从区域移动到区域！

现在已经有一个多星期了，我无处可去：/

如果你知道一种更好，更稳定的方式来接近这个，同时仍然使用jQuery会很棒！

真的非常感谢任何帮助！

非常感谢

Answer 1

部分修复：

您可以将css中的position:relative更改为position:absolute。这样可以在滚动完成时修复位置问题，但在动画过程中位置仍然不正确。

JSFiddle

Answer 2

我有一个适合你的解决方案，但由于我没有在循环插件文档中找到我想要的事件，这是一种黑客攻击......即将发布的解释。

好的，解释你的问题......发生的事情纯属于位置。例如，当转换到右侧时，您从容器的最右侧部分取出块，然后立即将其附加到另一个容器的最右侧部分。因此，当幻灯片在容器中转换时，您无法看到块，直到动画结束。转换回来也是如此。

现在解决这个问题......

正确的解决方案是让循环插件具有触发动画的每个循环的“循环”事件（类似于jQuery UI可拖动小部件上的拖动事件）。在回调该事件时，您将更新块的位置以与过渡一起移动。如果您可以找到此事件，或修改“循环”源代码以触发此类事件，我强烈建议您这样做，并应用此方法。如果您正在查看源代码，我首先会在源代码中查找setTimeout，setInterval，jQuery效果（幻灯片可能？）或jQuery动画。

由于我没有看到每个周期调用的事件，我不得不使用jQuery Animate函数伪造它。当页面转换发生时，我将块移动到容器的另一侧，并将其设置为正确位置的动画（最初设置它的位置，减去块的宽度的一半，使其不会超出目标容器）。不幸的是，这种方法完全取决于动画的时间安排。

用这个替换$（'。block'）代码，你应该能够开始使用这些值来获得你想要的代码。

$(".block").draggable({ 
    drag: function(event, ui) {
        if(ui.offset.left + ($(this).width()/2) > $(this).parent().width() && $(this).parent().get(0).id == 'areaOne'){
            //console.log('out of bounds');
            $('#next2').trigger('click');
            var next = $(this).parent().next();
            $(this).appendTo(next).css({
                left: -200,  //Starting position
                top: ui.position.top
            }).animate({
                left : ui.position.left - $(this).width()/2
            },1000);  //This number is the animation time (in ms)

        } 
        else if(ui.offset.left < 0 - ($(this).width()/2) && $(this).parent().get(0).id == 'areaTwo'){
           // console.log('out of bounds');
            $('#prev2').trigger('click');
            var prev = $(this).parent().prev();
            $(this).appendTo(prev).css({
                left: $(this).parent().width()+100, //starting position
                top: ui.position.top
            }).animate({
                left : ui.position.left + $(this).width()/2
            },900); //animation time (in ms)

        } 
    }
});

希望这有帮助，祝你好运！

Answer 3

使用可拖动的开始/停止事件在移动position:fixed上设置/取消设置.block。

这样，您可以在拖动时将其与容器（在定位方面）取消关联。

添加

    start: function(event,ui){
        $(this).addClass('in-orbit');
    },
    stop: function(event,ui){
        $(this).removeClass('in-orbit');
    }

可拖动选项和css规则

.in-orbit{
    position:fixed!important;
}

演示http://jsfiddle.net/gaby/tktGA/1/

在动画滚动期间将拖动的div传输到其他连接的可排序

3 个答案: