Question

该代码旨在将“人物”拖放到“房间”的时间段中，从而创建“预订”。克隆人进入房间按预期工作，但后来拖动克隆元素（现在是“预订”），导致非常奇怪的定位，我似乎无法弄清楚原因。

drop: function(event, ui) {
    if ($(ui.draggable).hasClass("person")) {
        var theItem = $(ui.draggable).clone();
        theItem.removeClass('person');
        theItem.addClass('rsvd');
    }else{
        var theItem = $(ui.draggable);
        // This Prevents wacky positioning
        theItem.removeAttr('style');    
    }
    theItem.draggable({
        revert: "invalid",
    });
    $(this).append(theItem);
}

简单代码位于http://jsfiddle.net/gdpodesta/fD48E/，您可以看到将两个紫色名称中的任何一个拖入时间段后，生成的红色元素无法在另一个时间段正确定位。

我发现通过在style事件期间删除drop属性，问题就会消失，但这似乎不是“正确”的做法....还有很多工作要做，而且我不想走很长的路来发现这种方法会产生其他问题 - 我错过了以正确的方式做到了什么？

P.S。 我意识到使用表格并不“正确”，但这使我可以清楚轻松地控制不相关的定位，并根据jquery事件使CSS自由定位。

Answer 1

与他Rahul Gupta中指出的answer一样，问题在于克隆具有内联样式。

为什么？

因为.rsvd你正在使用原始项目进行拖动，所以所有定位都将应用于被拖动的项目，之后您将附加项目的克隆以及定位。

为什么.person最初没有发生这种情况？

因为您使用clone作为helper，因此所有定位都将应用于帮助程序，您将克隆未触及的原始项目（未应用任何定位它）。

要解决此问题，您只需将clone用作helper，同时将其初始化为.rsvd，并将其设置为drop函数内的可拖动

theItem.draggable({
            helper: 'clone',
            revert: "invalid",
        });

Updated fiddle

旁注：您在.rsvd中为$(document).ready()执行的可拖动初始化是无用的，因为当时没有匹配的元素

Answer 2

问题是克隆的元素有style=position: relative;导致放置不当。因此，您只需将值style设置为position，而不是删除整个''属性。像这样：

...
.....
// This Prevents wacky positioning
theItem.css('position',''); //removed the previous code  theItem.removeAttr('style'); 
.....
....

如何在其他地方拖动克隆元素时正确控制它的位置

2 个答案: