0

我在拖放 jQuery UI 时遇到问题：

我有这个html：

<div class="outfit-wrapper">

    <div id="outfit-area"> <!-- drop to this area -->
        <div class="outfits"> <!--store images (and content) in this div -->
        </div> 

        <div class="toolbox-area"> <!-- functions (buttons) for outfit-area -->
            <img src="forward.png" class="button forward" alt="forward outfit" /> <!--forward selected outfitimage up (zindex +1), button-class for positioning-->
            <img src="backward.png" class="button backward" alt="backward outfit"/> <!--backward selected outfitimage down (zindex -1), button-class for positioning -->
        </div> 
    </div>

    <div id="products-area"> <!-- drag from this area -->
        <!-- examples products -->
        <div class="ui-draggable">prod1</div> 
        <div class="ui-draggable">prod2</div>
        <div class="ui-draggable">prod3</div>
        <div class="ui-draggable">prod4</div>
        <div class="ui-draggable">prod5</div>
    </div>

</div> <!--end outfit-wrapper-->

而这个 jQuery 代码：

$(document).ready(function(){

//Drag FROM - area
$( "#products-area .ui-draggable" ).draggable({
    helper: "clone",
    containment: ".outfit-wrapper", 
    option: "stack",//Comes over everything other objects when dragged
    revert: "invalid" //Revert will only occur if the draggable has not been dropped on a droppable.
});

//Drop TO - area
$( "#outfit-area").droppable({

    accept: "#products-area .ui-draggable", //Must come from this dragged element
    drop: function( event, ui ) {

        //Put content from dragged object into of a new <span> n #outfit-area
        var currentPos = ui.helper.position();
        var posLeft = parseInt(currentPos.left);
        var posTop = parseInt(currentPos.top);

        var draggedObj = ui.draggable.html(); //Get HTML-content of draggable

        //Add a span and a div
        var newContent = '<div class="outfit" style="position:absolute;left:' + posLeft + 'px;top:' + posTop + 'px;">'+draggedObj;
        newContent = newContent + '<span class="close-outfit">X</span>'; //Add a close-button for each dragged content
        newContent = newContent + '</div>';

        $(this).find(".outfits").append(newContent); //HOWTO: Get relative position of 


    }
});


}); //End onready (DOM is loaded)

我想做的是：

当用户拖动<div class="ui-draggable">prod{nr}</div>- 我希望它包含在 div #outfit-area的 dom 中，并且跨度应该包含在该 div 中。

posLeft 和 posTop 仅从拖动元素的原始位置获取相对值。

如何获取放置元素相对于新父级 #outfit-area 的位置？

有没有其他方法可以做到这一点？我用谷歌搜索了很多类似的问题，但不是这个特定的问题。我可能遗漏了一些非常明显的东西，但是请给我一些指示:-)

更新：（新问题出现）我发现了问题。这实际上是一个 CSS 问题：

我的CSS：

.outfit-wrapper {position:relative;height:800px;width:100%;}
#outfit-area {position:relative;float:left;margin-right:50px;width:300px;height:200px;border:1px solid #000000;}
.outfits {position:absolute;width:100%;height:100%;}
.toolbox-area {position:absolute;top:0;right:0;height:40px;width:60px;border:1px solid #ff0000;}

#products-area div {display:block;float:left;width:40px;}
#products-area {float:left;width:300px;height:200px;border:1px solid #000000;background:red;}

设置位置时：相对于#products-area：

#products-area {position:relative;float:left;width:300px;height:200px;border:1px solid #000000;background:red;}

拖放的元素返回错误的位置。为什么？

4

1 回答 1

1

您是否尝试过在放置后获取实际元素的位置？

var pos = ui.draggable.position();
var posLeft = pos.left;
var posTop = pos.top;
于 2013-05-28T08:40:42.973 回答