Fatal编程技术网
  • javascript/
  • Javascript 正在拖动的对象会跑开

Javascript 正在拖动的对象会跑开

javascript jquery asynchronous svg

Javascript 正在拖动的对象会跑开,javascript,jquery,asynchronous,svg,draggable,Javascript,Jquery,Asynchronous,Svg,Draggable,好的，我想要实现的是一个SVG，里面有一个可以移动的foreighObjects 我已经使移动成为可能（可拖动），碰撞计算看起来很正常。只有一个问题。当我移动物体时，它只是间隔。它刚从屏幕上消失 这里有一些HTML <div id="canvas"> <svg id="bewaar_holder" xmlns="http://www.w3.org/2000/svg" width="800" height="500" ></svg> </div&g

好的，我想要实现的是一个
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;
}

var kist_宽度=60；
var kist_width_real=62；//Dat符合所有margin的边界erbij op
var kist_高度=60；
var kist_height_real=62；//Dat符合所有边缘的边界erbij op
var行计数器=1；
函数makeNew（）{
var direction=$（'input[name=direction]：选中'）.val（）；
var name=$（“#输入_行_名称”）.val（）；
变量长度=$（“#输入#行长度”）.val（）；
变量高度=$（“#输入#行#高”）.val（）；
开关（方向）{
案例“lr”：
var-leHTML=''；
leHTML+=''+名称+''；
leHTML+=makeLR（长度、高度）；
打破
违约：
警惕（“Er是一种选择，是一种新的沃尔图德行动。”）；
打破
}
leHTML+=''；
document.getElementById（'bewaar_holder'）.appendChild（parseSVG（leHTML））；
makeDraggable（行计数器）；
行计数器++；
}
函数makeLR（长度、高度）{
var add=“”；
var计数器=1；
while（计数器0 | | parseInt（移动|顶部）>0）{
变量elem_foreign=$（“#foreign_row_uu”+id）；
var x1_cur=parseInt（$（elem_foreign）.attr（'x'））+parseInt（向左移动）；
变量x2_cur=（x1_cur+（parseInt（$（elem_foreign）.attr（“宽度”））；
变量y1_cur=parseInt（$（elem_foreign）.attr（'y'））+parseInt（move_top）；
变量y2_cur=（y1_cur+（parseInt（$（elem_foreign）.attr（“高度”））；
$（elem_row）.css（'left'，'0'）；
$（元素行）.css（'top'，'0”）；
如果（！mayMove（id，x1\u cur，x2\u cur，y1\u cur，y2\u cur））{
日志（“不能移动对象…”）；
返回false；
}
$（elem_foreign）.attr（'x'，x1_cur）；
美元（要素国外）.attr（'y'，y1_cur）；
日志（“我们刚搬家”）；
//返回false；
}
});
函数可以移动（id\u cur、x1\u cur、x2\u cur、y1\u cur、y2\u cur）{
var returnVal=true；
$（'.bounder'）。每个（函数（i，obj）{//通过所有对象循环
if（$（obj）.attr（“id”）！=“foreign_row_”+id_cur）{//忽略拖动（own）对象
var x1_obj=parseInt（$（obj）.attr（'x'）；
var x2_obj=（x1_obj+（parseInt（$（obj）.attr（“宽度”）））；
变量y1_obj=parseInt（$（obj）.attr（'y'）；
变量y2_obj=（y1_obj+（parseInt（$（obj）.attr（“高度”）））；
var minX1=数学最小值（x1_obj，x1_cur）；
var maxX1=数学最大值（x1_obj，x1_cur）；
var minX2=数学最小值（x2_obj，x2_cur）；
var maxX2=数学最大值（x2_obj，x2_cur）；
如果（maxX2=maxX1）{
日志（“与行重叠”+id\u cur）；
returnVal=false；
}
}
});
返回值；
}
函数makeDragable（id）{
$（“#行"+id）.draggable（{
//网格：[40,40]
});
}
函数解析SVG（个）{
var div=document.createElements（'http://www.w3.org/1999/xhtml","div",；
div.innerHTML=''+s+''；
var frag=document.createDocumentFragment（）；
while（div.firstChild.firstChild）
frag.appendChild（第一儿童分部第一儿童分部）；
返回碎片；
}
这是一个包含所有需要的文件的列表。我试着把它弄混了，但不知怎么的，那没用

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

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

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

有人能看到这段代码中的错误吗？我已经把头撞在墙上好几个小时了

编辑1

经过更多的调试，我意识到，
$（'body'）.on（'drag'
）在每次移动中都会执行（witch很好）。并且
外来对象的坐标更新为“正确”。只是元素的css（
左值和顶值
）没有更新。当我手动执行命令（
$（elem_row）.css（'left'，“0px”）；
）时，值会更新。这就是问题所在

因此，CSS没有正确更新，这看起来像是某种
async
“bug”（不是真正的bug，但这段代码的设置使它看起来像个bug）

现在唯一的问题…我不知道怎么解决。你们有什么想法吗

编辑2


我已经把代码放在了我的主机上，所以你们不需要下载任何东西就可以看到它。
所以在查看了您的代码之后，我做了很多更改

我在本文档的相应窗格中用
CHANGE:
注释记录了这些更改

最大的问题源于这样一个事实：您正在通过jquery使对象可拖动，然后在此基础上执行一些您自己的计算。这对小部件造成了一些不利影响

我删除了这段代码并利用了jQuery的
droppable
小部件。有了它，你可以告诉
障碍物
触发
drop
事件（如果有任何东西碰到它），使它恢复到“原始位置”


这在很大程度上忽略了您创建的
foreignObject
元素，并将重点放在浏览器通常使用的实际html元素上。
您好，谢谢您的回答。确实如此