Question

好吧，我想要实现的是SVG内部foreighObjects可以移动。

我已经可以移动（可拖动），并且剪切计算看起来没问题。只有一个问题。当我移动物体时，它只是间距。它只是用完了屏幕。

这是一些HTML

<div id="canvas">
    <svg id="bewaar_holder" xmlns="http://www.w3.org/2000/svg" width="800" height="500" ></svg>
</div>

这是JS：

var kist_width = 60;
var kist_width_real = 62; // Dat is met alle margin's en borders erbij op

var kist_height = 60;
var kist_height_real = 62; // Dat is met alle margin's en border erbij op

var row_counter = 1;


function makeNew(){
    var direction = $('input[name=direction]:checked').val();
    var name = $("#input_row_name").val();
    var length = $("#input_row_length").val();
    var height = $("#input_row_high").val();

    switch(direction){
        case 'lr':
            var leHTML = '<foreignObject id="foreign_row_' + row_counter + '" class="node obstacle foreign_drag" x="' + (10) + '" y="' + (10 ) + '" width="' + (( kist_width_real * length ) + kist_width_real ) + '" height="' + (kist_height + 2) + '"><body xmlns="http://www.w3.org/1999/xhtml">';
            leHTML += '<div class="row_holder_lr draggable_row" id="row_' + row_counter + '" ><div class="name_holder" >' + name + '</div>';
            leHTML += makeLR(length, height);
            break;
        default:
            alert("Er is een fout opgetreden waardoor de actie niet kon worden voltooid.");
            break;
    }

    leHTML += '</div></body></foreignObject>';
    document.getElementById('bewaar_holder').appendChild(parseSVG(leHTML));
    makeDraggable(row_counter);
    row_counter++;
}

function makeLR(length, height){
    var add = "";
    var counter = 1;
    while(counter <= length){
        add += '<div class="kist">';
        add += '<sup>' + counter + '</sup>';
        add += '<span>' + height + '</span>';
        add += '</div>';
        counter++;
    }

    return add;
}

/*
 * 
 * Alle drag acties:
 *
 */

$('body').on('drag', '.draggable_row', function() {
    var elem_row = this;
    var id = $(elem_row).attr('id');
    id = id.replace("row_", "");

    log("dragging row " + id);

    var move_left = $(elem_row).css('left').replace(/[^-\d\.]/g, '');
    var move_top = $(elem_row).css('top').replace(/[^-\d\.]/g, '');

    if(parseInt(move_left) > 0 || parseInt(move_top) > 0){
        var elem_foreign = $("#foreign_row_" + id);

        var x1_cur = parseInt($(elem_foreign).attr('x')) + parseInt(move_left);
        var x2_cur = (x1_cur + (parseInt($(elem_foreign).attr("width"))));
        var y1_cur = parseInt($(elem_foreign).attr('y')) + parseInt(move_top);
        var y2_cur = (y1_cur + (parseInt($(elem_foreign).attr("height"))));

        $(elem_row).css('left', "0");
        $(elem_row).css('top', "0");

        if(!mayMove(id, x1_cur, x2_cur, y1_cur, y2_cur)){
            log("may not move object...");
            return false;
        }

        $(elem_foreign).attr('x', x1_cur);
        $(elem_foreign).attr('y', y1_cur);
        log("we just moved");
        // return false;
    }

});

function mayMove(id_cur, x1_cur, x2_cur, y1_cur, y2_cur){
    var returnVal = true;
    $('.obstacle').each(function(i, obj) {      // Loop trough all objects
        if($(obj).attr("id") != "foreign_row_" + id_cur){   // Ignore the dragging ( own ) object
            var x1_obj = parseInt($(obj).attr('x'));
            var x2_obj = (x1_obj + (parseInt($(obj).attr("width"))));
            var y1_obj = parseInt($(obj).attr('y'));
            var y2_obj = (y1_obj + (parseInt($(obj).attr("height"))));

            var minX1 = Math.min(x1_obj, x1_cur);
            var maxX1 = Math.max(x1_obj, x1_cur);
            var minX2 = Math.min(x2_obj, x2_cur);
            var maxX2 = Math.max(x2_obj, x2_cur); 

            if( maxX2 <= minX1 || minX2 >= maxX1 ){
                log("overlapping with row_" + id_cur);
                returnVal = false;
            }
        }
    });
    return returnVal;
}

function makeDraggable(id){
    $("#row_" + id).draggable({ 
        // grid: [ 40, 40 ]
    });
}

function parseSVG(s) {
    var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
    div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
    var frag= document.createDocumentFragment();
    while (div.firstChild.firstChild)
        frag.appendChild(div.firstChild.firstChild);
    return frag;
}

这是一个zip file，包含所有需要的文件。我试图制作一个JSFiddle，但不知怎的，它不起作用。

基本上，发生的事情是用户点击按钮并调用函数makeNew。这使得一个新的svg元素并将其放入svg中。然后在div上有一个draggable调用（它在svg上不起作用）。

每次拖动div时，我们都可以使用边距将其添加到foreignObject x and y coordinates并再次清空div的左侧和顶部。

问题是你移动得越多，它跑得越快（我不会坚持使用鼠标）。

那么有人能看到这段代码中的错误吗？我一直在撞墙几个小时......

编辑1

经过大量的调试后，我意识到每个动作都会执行$('body').on('drag'（女巫很好）。并且foreignObject的坐标更新为“正确”。只是元素的css（left and top values）没有更新。当我手动执行命令（$(elem_row).css('left', "0px");）时，值会更新。这就是问题所在。

所以它看起来像某种async“bug”（不是真正的错误，但是这段代码的设置使得它看起来像是一个bug），CSS没有正确更新。

现在只有问题......我不知道如何解决这个问题。你们有什么想法吗？

编辑2

我已将代码放在我的托管上，所以你们可以看到它而无需下载所有内容。 The website

Answer 1

因此，在回顾了你所拥有的内容之后，我进行了相当多的改动。

我已在jsfiddle的相应窗格中注意到CHANGE:条评论的更改。

最大的问题源于你通过jquery使对象可以拖动，然后还可以执行一些自己的计算。这会导致窗口小部件产生一些不利影响。

我删除了那段代码并利用了jQuery的droppable小部件。有了这个，你可以告诉obstacles触发drop事件，如果有任何事情触及它，导致它恢复到它的'{1}}事件。原来的位置。

这在很大程度上忽略了您创建的foreignObject元素，并专注于浏览器通常使用的实际html元素。

被拖动的对象会跑掉

1 个答案: