4

我的问题如下：我想将元素拖放到另一个 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/

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

有什么快速的解决方案吗？

4

4 回答 4

4

使用可拖动插件的“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") + ')');                    
    }
});

请参阅jsfiddle的此链接。

于 2013-02-22T23:50:39.693 回答
2

问题出在“克隆”助手和放置目标的 z-index 上。将此添加到您的可拖动元素中，以通过自定义 css 为克隆元素强制 z-index：

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

检查您的可放置元素是否具有 z-index。

于 2014-09-19T08:46:04.103 回答
1

假设您想要一个不与 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都是同一个父母。

于 2013-02-20T17:50:22.443 回答
0

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

于 2013-04-02T14:39:05.587 回答