jquery - 随机移动元素的可放置和可拖动规划器问题

Question

由于这篇文章的标题很模糊让我解释一下。我在我正在使用的网站上创建了一个选框规划器，其想法是让用户从下拉列表中选择选框类型和大小，然后图像出现在 Canvas 上，然后可以四处拖动或旋转。还有改变地毯颜色的能力，我已经通过每个元素 Angular 落的小图标实现了 jQuery contextMenu 来做到这一点。虽然这有效并且图像在 div 中成功更改，但 div 总是跳回 Canvas 的左上角，它最初被放置的地方。如果不是因为用户可能已经用 table 布置了他们的选框 - 只是发现当他们更换地毯时选框偏离了他们的计划，这不会是一个大问题。

这是计划页面:

https://southwestmarquees.co.uk/newsite/marquee-planner

如果您打开顶部的第一个选项卡，然后选择“小框”、“框”或“传统”选取框，一旦出现，将其拖动到中心或至少远离左上角，然后单击地毯图标在 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("");
    }
});

其中“marquee-selector”是每个下拉菜单的类。

地毯图标的上下文菜单如下:

$.contextMenu({
    selector: '.carpet-menu',
    trigger: 'left',
    callback: function(key, options) {
        var carpetSize = $(this).parent().attr('data-carpet-size');
        var marqueeType = $(this).parent().attr('data-marquee-type');
        var carpetColour;
        var imageElement = $(this).parent().children().first();
        var currentWidth = imageElement.width();
        var currentHeight = imageElement.height();
        var currentTop = imageElement.parent().css('top');
        var currentLeft = imageElement.parent().css('left');
        if(key == 1) {
            carpetColour = "";
        } else if(key == 2) {
            carpetColour = "grey";
        } else if(key == 3) {
            carpetColour = "champagne";
        } else {
            carpetColour = "coir";
        }
        if(carpetColour) {
            $(this).parent().find('.marquee').attr('src', '/newsite/wp-content/themes/morb/images/marquee-planner/marquees/' + marqueeType + '/' + carpetSize + '-' + carpetColour + '.png');
        } else {
            $(this).parent().find('.marquee').attr('src', 'http://placehold.it/'+currentWidth+'x'+currentHeight+'/DDDDDD/DDDDDD');
        }
        $(this).remove(); // remove duplicated carpet icon.
        console.log(currentTop);
        console.log(currentLeft);
        imageElement.parent().css( {
            'top' : currentTop,
            'left' : currentLeft
        });

        return true;
    },
    items: {
        "1": {name: "Standard Floor", icon: "" },
        "2": {name: "Grey Carpet", icon: ""},
        "3": {name: "Champagne Carpet", icon: ""},
        "4": {name: "Coir Carpet", icon: ""},
        "sep1": "---------",
        "cancel": {name: "Cancel", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
    }
});

如您所见，我在开始时获取了当前的顶部和左侧位置，然后在返回之前使用 jQuery 中的 .css() 函数重新分配它们。但是，它完全被忽略了。我什至尝试使用确实有效的 css() 添加紫色边框 - 只是位置不起作用。可能是它在某个地方被覆盖了，但我不知道为什么或如何。澄清一下，在我设置顶部和左侧之前的 console.log() 是正确的 - 您可以在打开控制台的同时尝试该示例。

感谢任何帮助，如果有人需要更多信息，请询问。

Answer 1

正在调试您的站点，https://southwestmarquees.co.uk/newsite/marquee-planner/ ，使用 Chrome 开发人员工具，我看到 currentTop 和 currentLeft 未定义。如果您在控制台中键入 imageElement.parent().css('top')，您将看到未定义(在 var imageElement = $(this).parent( ).children().find('img');当然).

然而，我从中获取了 left 和 top 值

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

在控制台中，它应该与您要查找的值相同，因为 $(this).parent() 与 imageElement.parent() 是同一父级。