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