Question

我遇到拖拽问题删除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 的获取位置？

有没有其他方法可以做到这一点？我用Google搜索过，我可以找到很多类似的问题，但不是这个问题。我可能错过了一些非常明显的东西，但随后给我一些指示： - ）

更新：（新问题到货）我发现了这个问题。这实际上是一个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上设置position：relative：

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

拖放的元素在删除时返回错误的位置。的为什么吗

Answer 1

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

var pos = ui.draggable.position();
var posLeft = pos.left;
var posTop = pos.top;

获取相对于父对象Jquery UI的位置

1 个答案: