Question

这是我的第一篇帖子onstackoverflow。我搜索了我的问题，看到了我的问题附近的一个链接，但没有确切的。

无论如何，这是我的jsfiddle链接。

以下是代码：

    $(function() {
        $('#armie').append('<div id="test_slide"></div>');
        $("#test_slide").draggable({
        });

        var position_orig       = $("#test_slide").position();
        var position_orig_left  = position_orig.left;
        var position_orig_top   = position_orig.top;
        var position_curr       = null;
        var position_curr_left  = null;
        var position_curr_top   = null;

        $("#square1").droppable({
            drop: function(event, ui) {
                if (1 == 2) {
                    position_curr = $("#test_slide").position();
                    position_curr_left = position_curr.left;
                    position_curr_top = position_curr.top;
                    var needed_offset_left = position_orig_left - position_curr_left;
                    var needed_offset_top   = position_orig_top - position_curr_top;
                    $("#test_slide").animate({left: '+=' +needed_offset_left+ 'px', top: '+=' +needed_offset_top+ 'px'}, "slow");
                } else {
                    //$(this).append($("#test_slide"));
                    ui.draggable.detach().appendTo($(this));
                    alert("square1 html" + $(this).html());
                }
            }
        });
    });

的CSS：

    #armie {
        position:absolute;
        width:120px;
        height:120px;
        top:400px;
        left:400px;
        border:4px solid #000;
        z-index:50;
    }
    #test_slide {
        position:absolute;
        width:100px;
        height:100px;
        background-color:#f00;
        top:10px;
        left:10px;
        z-index:100;
    }
    #square1 {
        display:inline;
        position:absolute;
        top:50px;
        left:20px;
        width:150px;
        height:150px;
        background-color:blue;
        z-index:5;
    }
    #square2 {
        display:inline;
        position:absolute;
        top:400px;
        left:700px;
        width:150px;
        height:150px;
        background-color:yellow;
    }
    #square3 {
        display:inline;
        position:absolute;
        top:50px;
        left:500px;
        width:150px;
        height:150px;
        background-color:purple;
    }
    #square4 {
        display:inline;
        position:absolute;
        top:500px;
        left:175px;
        width:150px;
        height:150px;
        background-color:black;
    }
    #square5 {
        display:inline;
        position:absolute;
        top:300px;
        left:80px;
        width:150px;
        height:150px;
        background-color:green;
    }

和标记：

<div id="armie">
</div>
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
<div id="square4">
</div>
<div id="square5">
</div>

如果你只是去小提琴链接，那么看起来更容易。无论如何，所以我希望能够有条不紊地将红色div拖动到蓝色div中。现在，我只有if（1 == 2）愚蠢，但最终ajax调用的结果将是有条件的红色div快照或附加到蓝色（square1）div。

第一部分工作正常。如果我将条件设置为if（1）...无论我将红色方块拖到蓝色方块内的哪个位置，它都会向后移动并且很好地居中。但是，如果我有if（1 == 2）...，而红色方块被附加到蓝色方块而square1看起来有红色方块的内容（由警告声明证明），红色方块消失（如你可以用小提琴看到自己。在这一点上，我有点难过。 square1报告说它有红色div，但是没有这方面的视觉证据，如果我试图再次拖动它，它甚至不会像它那样但只是看不见。它也不是一个zindex的东西，因为我检查了这个值，它仍然设置。为了确保这一点，当我将红色div放到蓝色的div上时，我没有将它直接放在上面，所以一些红色的div应该仍然显示出来。它实际上就消失了。

知道如何解决这个问题吗？我尝试了几种不同的方法，但没有任何效果。我试过克隆div，但我无法得到任何爱。感谢您抽出宝贵时间来研究这个问题。

Answer 1

好的，我知道问题是什么。我是正确的，因为square1确实得到了test_slide div。那问题是什么？它可以通过相对于从armie div中拾取它的顶部和左侧属性来设置它。换句话说，在它附加时，它的顶部和左侧大致在-300范围内。因此，一旦它被追加，从square1到-300（或左右）的顶部（或左右）从square1向左移动，其中一个元素离开页面。只需添加

ui.draggable.css({top:10, left:10, position:'absolute'});

在detach语句设置相对于square1的位置后，这样才能解决问题！我是一个快乐的露营者！也许这会帮助其他人不去度过这一天。

我使用jquery来拖放，追加和拖放到droppable，但是当我这样做时，拖拽消失了

1 个答案: