Javascript 拖放 : when draggable object has a fixed or absolute position it disappears behind droppable area

Question

我的问题如下:我想将元素拖放到另一个 div 区域内。我在这个特定示例中使用 jquery 可拖放元素。但是，当可拖动容器的位置设置为固定或绝对时，只要我拖动，可拖动容器就会消失在可放置容器后面。虽然下降确实正常工作。

JS代码:

$(function() {
     $("#draggable1" ).draggable({helper:'clone'});
     $("#draggable2" ).draggable({helper:'clone'});
     $("#draggable3" ).draggable({helper:'clone'});
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                    $("#droppable").css('background-image', 'url(' + $(ui.draggable).attr("src") + ')');                    
            }
        });
 }); 

HTML代码:

<table cellpadding="0" cellspacing="0" border="0" class="draggable_container">
        <tr>
            <td><img id="draggable1" class="draggable" src="someimage.jpg" width="100" height="100"></td>
            <td><img id="draggable2" class="draggable" src="someimage2.jpg" width="100" height="100"></td>
            <td><img id="draggable3" class="draggable" src="someimage3.jpg" width="100" height="100"></td>
        </tr>
    </table>

<div id="droppable" class="ui-widget-header">
    Drop here
</div>

CSS:

#draggable_container {
    position:fixed;
}
#droppable {
    width: 400px; 
    height: 300px; 
    padding: 0.5em; 
    margin: 10px; 
    background-size: cover;
    margin-top:100px; 
    margin-left:80px;
    position:absolute;
}

此处示例:http://jsfiddle.net/spairus/tXCjH/104/

如何防止可拖动元素消失在可放置元素后面？我尝试过 z -indexing 但没有用(经过一些研究，在这个特定示例中似乎没有任何区别)。我唯一设法做到的是在声明可拖动容器之前声明可放置区域，如下所示:http://jsfiddle.net/spairus/tXCjH/105/

然而，这对我来说现在是个问题，因为我需要编辑的原始应用程序是一段较旧的代码，其中包含许多表格和复杂的功能，需要数天的工作时间。

有什么快速解决办法吗？

Answer 1

使用可拖动插件的“appendTo”选项。它将在拖动时将可拖动助手附加到选择的节点(从而防止您看到的问题):

$("#draggable1" ).draggable({helper:'clone', appendTo:'body'});
$("#draggable2" ).draggable({helper:'clone', appendTo:'body'});
$("#draggable3" ).draggable({helper:'clone', appendTo:'body'});
$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        document.getElementById('droppable').innerHTML = "test";
        $("#droppable").css('background-image', 'url(' + $(ui.draggable).attr("src") + ')');                    
    }
});

查看此 link to jsfiddle .