Question

我的问题如下：我想将元素拖放到另一个div区域内。我在这个特定的例子中使用了jquery draggable和droppable元素。但是，当draggables容器的位置设置为固定或绝对时，可拖动的容器一旦消失就会在可投放容器后面消失，并且只要我拖动就可以。虽然下降确实正常。

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/

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

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

对此有什么快速解决方案吗？

Answer 1

使用draggable插件的“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。

Answer 2

问题在于“克隆”助手的z-index和放置目标。将此添加到您的draggable以通过克隆元素的自定义css强制z-index：

start: function (e, ui) {
    $(ui.helper).css({
       "z-index": "9"
    })
},

检查你的droppable元素是否具有z-index。

Answer 3

假设您想要一个不会混淆html结构的答案..这里只是一个javascript答案http://jsfiddle.net/abbood/tXCjH/106/

var draggable = $('.draggable_container');
var parent = draggable.parent();
draggable.remove();
parent.append(draggable);

 $("#draggable1" ).draggable({helper:'clone'});
 $("#draggable2" ).draggable({helper:'clone'});
 $("#draggable3" ).draggable({helper:'clone'});

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

我基本上模仿了你从javascript角度所做的事情。这假设draggable和droppable都是同一个父母。

Answer 4

看起来使这项工作没有问题的唯一方法是在droppables容器之后定义draggables容器，然后使用CSS将第一个放在页面上的第一个之前。

Javascript拖放：当可拖动对象具有固定或绝对位置时，它会在可放置区域后面消失

4 个答案: