Question

由于这篇文章的标题很模糊，让我解释一下。我在我正在处理的网站上创建了一个选取框规划器，其目的是让用户从下拉列表中选择一个选取框类型和大小，然后图像显示在画布上，然后可以拖动或旋转。还有改变地毯颜色的能力，我已经通过每个元素角落的一个小图标实现了jQuery contextMenu。虽然这样可以在div中成功更改图像，但div总是会跳回到画布最左边的位置。这不是一个大问题，如果不是因为它可能的用户已经用桌子安排他们的选框 - 只是发现当他们改变地毯时，选框跳出他们的计划。

这是计划页面：

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("");
    }
});

其中＆＃39;选框选择器＆＃39;是每个下拉班级。

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

$.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

使用Chrome开发者工具调试您的网站https://southwestmarquees.co.uk/newsite/marquee-planner/，我将currentTop和currentLeft视为未定义。如果在控制台中键入imageElement.parent().css('top')，您将看到未定义（在var imageElement = $(this).parent().children().find('img'); of course之后有一个断点）。

然而，我从

获得左侧和顶部值

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

控制台中的

，它应该是您要查找的相同值，因为$（this）.parent（）与imageElement.parent（）是同一个父。

随机移动元素的可丢弃和可拖动规划器问题

1 个答案: