1

として配置された一連の画像がありますposition:relative（隣り合って表示されます）。

このコードを使用してドラッグ アンド ドロップします (jQuery API ドキュメントから盗み、必要に応じて変更しました)。

$(function() {
        $( ".draggable" ).draggable({
                start: function(event, ui) {
                    // Show start dragged position of image.
                    var Startpos = $(this).offset();
                    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
                    pos_left = Startpos.left; //pos_left is global
                    pos_top = Startpos.top; //pos_top is also global
                },
                stop: function(event, ui) {
                    // Show dropped position.
                    var Stoppos = $(this).offset();
                    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    $(this).css('position', "fixed"); //tried absolute and relative, too
                    $(this).css('left', pos_left);
                    $(this).css('top', pos_top); 
                }
        });

        $( ".droppable" ).droppable({
               drop: function( event, ui ) {
                   id = $(this).attr('id');    
               alert(id);
            }
        });
    });

私がやろうとしているのは、ユーザーがドロップした後、ドラッグ可能な要素を初期位置に戻すことです。ただし、私の要素は最初の左に相対的に配置されているため、上の座標はすべて同じです (または、これはドキュメントから理解していることです。ここで間違っている可能性があります)。そのため、画像は返されますが、実際にはそれぞれが他の画像の上に積み重ねられます。

私は何を間違っていますか？私はどうしたらいいですか？

4

2 に答える 2

9

良い。自分でそれを行う代わりに、ドラッグ可能の元に戻すオプションを使用してください。jQuery UI ドックから:

$( ".selector" ).draggable({ revert: true });
于 2010-12-05T20:58:32.273 に答える
1

その位置を相対、上 = 0px、左 = 0px にすることができます。このコードで私のために働いた：

$(function(){
$('#draggable').draggable().append('<a href=# class=exit>x</a>');
});
$(function(){
$('.exit').click(function(){
$('#draggable').css({
'top': '0px',
'left': '0px',
'position': 'relative'
});
});
});
于 2010-12-05T21:23:27.980 に答える