0
共通の親の中に絶対的に配置されたdivの数があります。 divをドラッグして、各divの周りの上、左、右、下のターゲットにドロップする機能をユーザーに与えたい。私はボトムターゲットで作業していますが、ロジックは次のとおりです。Jquery位置の要素がもう1つ下にある
ドラッグを挿入する前に、互いに下にあるすべてのdivを保持する配列を作成します。ドラッグされた要素の位置を決めるには、ドロップターゲットの最下部とターゲットの高さの差を見つけました。この値はドラッグされた要素の一番上になります。これまですべてのことがうまくいっています。次に、ドロップターゲットの下にある要素を取得するためにループを使用します。私の考えは、ドロップされた要素の高さ+そのトップ値であるボトムオフセットを加えることによって、すべてのdivのトップ値を更新することでした。これは2つの要素に対してのみ機能し、さらに要素がある場合は失敗します。以下は私のコードです。親切に私を助けてください。
//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)
}
}
}