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

You could make its position relative, top=0px, and left=0px. Worked for me with this code:

$(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 回答