좋아, 내가 이루고자하는 것은 SVG이며 그 안에는 foreighObjects이 움직일 수 있습니다.끌고있는 객체가 도망갑니다
나는 움직일 수있게 만들었고 (draggable) 콜리 전 계산은 괜찮습니다. 단 하나의 문제가 있습니다. 내가 물체를 움직일 때, 그냥 간격을 둡니다. 그냥 화면 밖으로 떨어집니다.
여기에 일부 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;
}
그래서 기본적으로 사용자가 버튼을 클릭하고 함수 makeNew이 호출됩니다. 그것은 새로운 svg 요소를 만들고 그것을 svg 안에 넣습니다. 그런 다음 div에 draggable 호출이 있습니다 (svg에서 작동하지 않음).
div를 드래그 할 때마다 여백을 사용하여 foreignObject x and y coordinates에 추가하고 div의 왼쪽과 상단을 다시 비울 수 있습니다.
문제는 이동 속도가 빠를수록 빠져 나가는 속도가 빨라집니다 (마우스를 고수하지 않음).
그럼이 코드 조각에서 버그를 볼 수 있습니까? 나는 내가 $('body').on('drag'이 모든 움직임에서 실행되는 실현에 와서 더 디버깅을 많이 한 시간 동안 벽에 내 머리 ...
EDIT 1
를 두드리는 있었어요 (마녀는 좋다). 그리고 foreignObject의 좌표가 "correct"로 업데이트됩니다. 요소의 CSS (left and top values)가 업데이트되지 않는다는 것입니다. 수동으로 명령 ($(elem_row).css('left', "0px");)을 실행하면 값이 업데이트됩니다. 그래서 그것이 문제입니다.
async "버그"(실제 버그가 아니지만이 코드 조각을 설정하면 버그 인 것 같습니다)와 같이 보이며 CSS가 제대로 업데이트되지 않습니다.
지금 문제는 ... 어떻게 해결해야할지 모르겠다. 너희들 생각이 있니?
너희들 모두를 다운로드 할 필요없이 볼 수 있도록 내가 내의 호스팅에 코드를 배치 한 2
편집 할 수 있습니다. The website
실행중인 hehe :) –