Jquery 具有随机移动元素的可拖放规划器问题

因为这篇文章的标题很模糊，让我解释一下。我已经在我正在工作的网站上创建了一个选框规划器，其想法是让用户从下拉列表中选择选框类型和大小，图像显示在画布上，然后可以拖动或旋转。还有改变地毯颜色的功能，我已经实现了jQuery contextMenu，通过每个元素角落的一个小图标来实现。尽管这样做有效，并且图像在div中成功更改，但div始终会跳回画布的左上角，在那里它最初会被删除。如果不是因为用户很可能已经把他们的帐篷和桌子安排好了，这不会是一个大问题——结果发现，当他们更换地毯时，帐篷就偏离了他们的计划

以下是计划页面：

如果沿顶部打开第一个选项卡，然后选择一个小边框、边框或传统字幕，一旦出现，将其拖到中间或至少从左上角移开，然后单击div右上角的地毯图标，并对其进行更改

选择选框时运行的代码：

$( ".marquee-selector" ).change(function(){
    var carpet_choice = true;
    if($(this).attr('id') == "catering") {
        carpet_choice = false;
    }
    var val = $(this).find(':selected').val();
    if(val.length > 0) {
        var onCanvas = $('#dropHere > div').length;
        var newItemClass = "item-" + (onCanvas + 1);
        var asset_html = '<div data-marquee-type="'+$(this).attr('id')+'" class="img-responsive ui-draggable-handle ' + newItemClass + ' rotatable ui-resizable ui-draggable"><img class="marquee" /></div>';
        $('#dropHere').append(asset_html);
        $('#dropHere .' + newItemClass + ' .marquee').attr('src', val).load(function () {
            var carpetSizeString = val.match(/\d+(?=ft)/g).join("-");
            $('.'+newItemClass).attr('data-carpet-size',carpetSizeString);
            var image = new Image();
            image.src = $(this).attr("src");
            $('.' + newItemClass).position({
                my: "left top",
                at: "left top",
                of: "#dropHere"
            }).addClass('rotatable');
            make_draggable($('.' + newItemClass));
            if(carpet_choice) {
                $('.' + newItemClass).append('<div class="carpet-menu"></div>');
            }
            $('.rotatable').resizable().rotatable(rotateParams);
            $(this).parent('.' + newItemClass).width(image.naturalWidth);
            $(this).parent('.' + newItemClass).height(image.naturalHeight);
            $('.' + newItemClass).on('dblclick', function () {
                $(this).remove();
            });

        });
        // after it's been dropped on the canvas, reset the dropdown in case the user wants to select another of the same.
        $(this).val("");
    }
});

如您所见，我在开始时获取当前的顶部和左侧位置，然后在返回之前使用jQuery中的

.css（）

函数重新分配它们。然而，它被完全忽略了。我甚至尝试使用

css（）

添加一个紫色边框，它确实有效-只是位置不起作用。它可能在某个地方被覆盖，但我不知道为什么或者如何。为了澄清，在我设置顶部和左侧之前的

console.log（）

是正确的-您可以在打开控制台的同时尝试该示例

非常感谢您在这方面提供的任何帮助，如果有人需要更多信息，请询问。

使用Chrome开发者工具调试您的站点，我发现currentTop和currentLeft未定义。如果在控制台中键入，

imageElement.parent（）.css（'top'）

，您将看到未定义（在

var-imageElement=$（this.parent（）.children（）.find（'img'）；当然

）后面有一个断点）

然而，我从

$(this).parent().position().left
$(this).parent().position().top

---

在控制台中，它应该与您要查找的值相同，如$（this）.parent（）与imageElement.parent（）是同一个父对象。

感谢这一点-今天早上再次查看了代码，我认为可能发生的情况是，当地毯图像更改时，它会运行由图像更改触发的代码-在我上面的js的第一段中。我只需要找到一种方法来阻止它不止一次这样做

$(this).parent().position().left
$(this).parent().position().top