0
나는 공통 부모 안에 절대적으로 배치 된 div 수를 가지고 있습니다. div를 드래그하여 각 div 주변의 위쪽, 왼쪽, 오른쪽 및 아래쪽 대상 위에 놓을 수있는 기능을 사용자에게 제공해야합니다. 하단 타겟에서 작업 중이며 로직은 다음과 같습니다. -Jquery 위치 요소가 하나 아래에 있습니다.
드래그 가능을 삽입하기 전에 서로 아래에있는 모든 div를 포함 할 배열을 만듭니다. 드래그 된 요소의 위치를 지정하기 위해 드롭 대상의 맨 아래에 대상의 높이 + 높이를 놓았습니다. 이 값은 드래그 된 요소의 맨 위에 표시됩니다. 모든 것은 이것까지 훌륭합니다. 그런 다음 루프를 사용하여 드롭 대상 아래에있는 요소를 검색합니다. 내 생각은 드롭 된 요소의 높이 + 맨 위 값인 맨 아래 오프셋을 추가하여 모든 div의 최상위 값을 업데이트하는 것이 었습니다. 이것은 두 요소에 대해서만 작동하며 더 많은 요소가있는 경우 실패합니다. 아래는 제 코드입니다. 친절하게 도와주세요.
//droptarget is the element after which the new element is places
var dropElmPos=$("#"+droptarget).position();
var targetPos=getOffset($("#"+droptarget));
var targetTopval=targetPos.top;
var heightOffset=$("#"+droptarget).outerHeight(true);
var dropElmBottom=targetTopval+heightOffset;
var newElmTop=dropElmBottom;
//create array of element which are below drop target
Elmposition="bottom";
targetELM=gettargetElement(droptarget,Elmposition);
//insert element
$("#"+droptarget).after(strElement);
var newElmId=$("#"+droptarget).next().attr('id');
var className=newElmId+"Class";
var elmProperty="top";
var strCssProperties=newElmTop+"px";
//update position of new element
if($("#"+newElmId).hasClass(className)) {
updateStyleExact(className, strCssProperties, elmProperty);
}
else {
var strCsstext="position:absolute; clear:both; "+elmProperty+":"+strCssProperties;
writeStyle(className, strCsstext);
$("#"+newElmId).addClass(className)
}
//refresh positions of existing element which are below the drop target
if(targetELM.length==0) {
return false;
}
else {
//refresh position of the element
var marginOffset=0;
var className=newElmId+"Class";
var marProperty="margin";
//get margin val
marginVal=getSpacingVal(className, marProperty);
marginLen=marginVal.length;
if(marginLen==1) {
marginOffset=marginVal[0];
}
else if(marginLen==2) {
marginOffset=marginVal[0];
}
else if(marginLen==4) {
marginOffset+=marginVal[0];
marginOffset+=marginVal[2];
}
//update positions of elements in array
var elemLength=targetELM.length;
//getoffset - gets top and left values
var newPos=getOffset($("#"+newElmId));
var tgtElmbottom=newPos.top+$("#"+newElmId).outerHeight(true)+marginOffset;
for(var j=0; j<elemLength; j++) {
var NextElmpos=getOffset($("#"+targetELM[j]));
var NextElmTop=NextElmpos.top;
var className=targetELM[j]+"Class";
var elmProperty="top";
//if I use following line, i works only for two elements properly and if the third and fourth element top positions are wrong - greator by the offset NextElmTop
var strCssProperties=tgtElmbottom+NextElmTop+"px";
//if I use following line, i works only for two elements, the dropped one and one after it
var strCssProperties=tgtElmbottom+"px";
if($("#"+targetELM[j]).hasClass(className)) {
updateStyleExact(className, strCssProperties, elmProperty);
}
else {
var strCsstext="position:absolute; clear:both;"+elmProperty+":"+strCssProperties;
writeStyle(className, strCsstext);
$("#"+NextElmId).addClass(className)
}
}
}