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 #outfit-area<div class="ui-draggable">prod{nr}</div>の 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 に position:relative を設定する場合:

#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 に答える