Question

我在一个共同的父母中绝对定位了多个div。我希望用户提供拖动div的工具，并在每个div周围放下顶部，左侧，右侧和底部目标。我正在研究底层目标，逻辑如下 -

在插入可拖动之前，我创建了一个数组，它将保存所有放在彼此下方的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)
                                }
                            }
                        }

Answer 1

编写自己的拖放功能可能会让人感到痛苦。为什么不使用JQuery UI，它有一个很好的拖放类，有很多自定义选项

有关详细信息，请参阅http://jqueryui.com/demos/draggable/。

当然这是另一种依赖，但它每次都有效。

Jquery将元素置于另一个之下

1 个答案: