2

我的页面有两列（div），第一个有一个需要拖到第二个的 div 列表，但 div 总是消失在第二个 div 后面...尝试 z-index 但没有成功...

使用克隆助手它可以工作，但我不想使用它，因为我想确保只拖动一次......

我已经搜索了很多，但我似乎无法找到解决方案......可能错过了一个细节......

谢谢！

代码：

<html>
<head>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
.columns{width: 45%;
        height: 100%;
        float: left;
        overflow: auto;}

#col2{border-left: 1px solid black;}

.detailStyle{font-weight: bold;}

.detailSimple{list-style: inside;
                font-weight: normal;}

.zeroSimple, .zeroStyle, .noImage{font-style: italic;
    font-weight: normal;
    color: #900;}

.disabled{ text-decoration: line-through;
            color: #CCC;}

#dropit{ background-color: #DDD;
        border: 2px #CCC dotted;
        width: 95%;
        height: 50%;}

#dropit #title{color: #CCC;
                }

</style>
</head>
<body>
<div id="col1" class="columns">
<h3>divs</h3>
</div>
<div id="col2" class="columns"><h3>Add</h3>
<div id="dropit"><div id="title">DRAG AND DROP HERE</div></div>
</div>
<script language="javascript">
$(function() {

    function getProductStyles(){
        for(i=0;i<1000;i++){
            div = $('<div/>', { id: "div"+i, html: "div: "+i});
            div.draggable({containment: "document", zIndex:1000, scroll: false , appendTo: "body", revert: "invalid", revertDuration: 100, cursor: "pointer"});
            $('#col1').append(div);
        }
    }

    getProductStyles()

});
</script>
</body>
</html>
4

1 回答 1

0

我不知道您的拖放是否已经在工作，但是在您的 css #col2 中，可拖动消失在右列后面的问题是：

overflow: auto;

我在这里创建了一个没有溢出的小提琴。

于 2013-05-16T16:28:09.523 回答