【发布时间】：2014-06-16 15:43:35
【问题描述】：
好的，我想要实现的是一个SVG，里面有一个可以移动的foreighObjects。
我已经使移动（可拖动）成为可能，并且碰撞计算看起来没问题。只有1个问题。当我移动物体时，它只是间距。它只是跑出屏幕。
这里有一些 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“错误”（不是真正的错误，但这段代码的设置使它看起来像是一个错误），CSS 没有正确更新。
现在唯一的问题...我不知道如何解决这个问题。大家有什么想法吗？
编辑 2
我已将代码放在我的主机上，因此你们无需下载所有内容即可查看。 The website
【问题讨论】：
标签： javascript jquery asynchronous svg draggable