Question

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

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

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

谢谢！

CODE：

<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>

Answer 1

我不知道你的拖累和drop已经工作与否了，但是右栏后面拖拽的问题就在你的css＃col2中了：

overflow: auto;

我创建了一个没有过度的小提琴here。

jQuery UI div拖延其他div

1 个答案: