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)
}
}
}