Question

我正在为某个网站制作功能，这有助于将对象分组到一个div中，然后将其更改为组，调整大小，旋转等。我在div中保存已编辑对象的参数时遇到问题。调整大小后我必须纠正他们在工作区的位置，但似乎jquery .offset（）不起作用。

function grouped_objects_saving(merged_block_id){ 
    var count = $("#"+merged_block_id+" > .merged").length;
    var angle = transform_to_angle(merged_block_id);
    var scaleX = transform_to_scale(merged_block_id, "x");
    var scaleY = transform_to_scale(merged_block_id, "y");
    var brows = browser();
    var topOff = [];
    var leftOff = [];
    var objId = [];
    var width = [];
    var height = [];
    var imageAngle = [];
    var resultAngle = [];
    var transform = "";
    var check = false;
        switch(brows){
            case "Chrome":
                transform = $('#'+merged_block_id).css('-webkit-transform');
            break;
            case "IE":
                transform = $('#'+merged_block_id).css('-ms-transform');
            break;
            case "Firefox":
                transform = $('#'+merged_block_id).css('-moz-transform');
            break;
            default:
                transform = $('#'+merged_block_id).css('transform');
            break;
        }
        for (i=0; i<count; i++) {
            objId[i] = $("#"+merged_block_id+" > .merged").eq(i).attr('id');
            topOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().top;
            leftOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().left;
            width[i] = $("#"+objId[i]).width();
            height[i] = $("#"+objId[i]).height();
            imageAngle[i] = transform_to_angle(objId[i]);
            resultAngle[i] = imageAngle[i]+angle;
            $("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
        }
        for (i=0; i<count; i++) {
            $("#"+objId[i]).appendTo($('#workarea'));
            switch(brows){
                case "Chrome":
                    $("#"+objId[i]).css({'-webkit-transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
                case "IE":
                    $("#"+objId[i]).css({'-ms-transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
                case "Firefox":
                    $("#"+objId[i]).css({'-moz-transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
                default:
                    $("#"+objId[i]).css({'transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
            }
            $("#"+objId[i]).width(width[i]*scaleX);
            $("#"+objId[i]).height(height[i]*scaleY);
            $("#"+objId[i]).appendTo($('#'+merged_block_id));
            //$("#"+objId[i]).addClass("editable selectable"); 
            if (i==count-1) {
                check = true;
            }
        }
        if (check==true){
            for (i=0; i<count; i++) {
                console.log('$("#'+objId[i]+'").offset({top:'+topOff[i]+', left:'+leftOff[i]+'});');
                $("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
            }
        }
    return true;
}

问题出在最后一个字符串中：

$("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});

如果我复制来自控制台的字符串：

console.log('$("#'+objId[i]+'").offset({top:'+topOff[i]+', left:'+leftOff[i]+'});'

例如

$("#custom-image-58clx").offset({top:393.089111328125, left:407.17822265625});

并在控制台中使用它，正常工作，偏移设置。

我不知道为什么它不能通过代码工作。

Answer 1

我仍然不知道为什么原始代码不起作用且.offset未应用，但在将代码更改为下面的代码后，它运行正常。

function grouped_objects_saving(merged_block_id, type){ 
    var count = $("#"+merged_block_id+" > .merged").length;
    var angle = transform_to_angle(merged_block_id);
    var scaleX = transform_to_scale(merged_block_id, "x");
    var scaleY = transform_to_scale(merged_block_id, "y");
    console.log("scaleX: " + scaleX);
    console.log("scaleY: " + scaleY);
    var brows = browser();
    var transform = "";
        switch(brows){
            case "Chrome":
                transform = $('#'+merged_block_id).css('-webkit-transform');
            break;
            case "IE":
                transform = $('#'+merged_block_id).css('-ms-transform');
            break;
            case "Firefox":
                transform = $('#'+merged_block_id).css('-moz-transform');
            break;
            default:
                transform = $('#'+merged_block_id).css('transform');
            break;
        }
    var topOff = [];
    var leftOff = [];
    var objId = [];
    var width = [];
    var height = [];
    var imageAngle = [];
    var resultAngle = [];
    for (i=0; i<count; i++) {
        objId[i] = $("#"+merged_block_id+" > .merged").eq(i).attr('id');
        topOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().top;
        leftOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().left;
        width[i] = $("#"+objId[i]).width();
        height[i] = $("#"+objId[i]).height();
        imageAngle[i] = transform_to_angle(objId[i]);
        resultAngle[i] = imageAngle[i]+angle;
        $("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
        console.log("resultAngle: "+ resultAngle[i]);
        console.log("ObjId: "+objId[i]);
        console.log("topOff: "+topOff[i]);
        console.log("leftOff: "+leftOff[i]); 
    }
   for (i=0; i<count; i++) {
               $("#"+objId[i]).removeAttr('style');
               $("#"+objId[i]).appendTo($('#workarea'));
               $("#"+objId[i]).css({
                   'width': width[i]*scaleX+"px",
                   'height': height[i]*scaleY+"px",
                   '-webkit-transform': 'rotate('+resultAngle[i]+'deg)',
                   '-ms-transform': 'rotate('+resultAngle[i]+'deg)',
                   '-moz-transform': 'rotate('+resultAngle[i]+'deg)',
                   'transform': 'rotate('+resultAngle[i]+'deg)',
                   'position': 'absolute'
               }).offset({top: topOff[i], left: leftOff[i]});
        }
    }
    return true;
}

我认为这是由错误的动作序列引起的。

Jquery .offset（）setter不起作用

1 个答案: