当我将一个元素拖到另一个div时，该图标被div覆盖，为什么？ jQueryUI的

Question

可拖动的对象是li，我将它拖动到黄色div。由于某种原因，黄色div覆盖了我拖动的对象。

我和li和ul的z指数高于黄色和红色。

我错过了什么吗？

HTML

<div id="draggablecontainer">
    <div id="streamWrapper">

    </div>

    <div id="streamers">
        <ul id="streamlist">
        </ul>
    </div>

</div>

jQueryUI的

 $( "#streamWrapper" ).droppable({
      hoverClass: 'hoverdrop',
      drop: function(event, ui ) {
        var currentID = ui.draggable.attr("id");        
      }
    });

CSS

#draggablecontainer{
position:absolute;
width:100%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
background-color: yellow;
z-index:1;
}

#streamWrapper{
position:relative;
padding-top:100px;
height:600px;
font-size:3em;
z-index:2;
background-color: red;

}

.hoverdrop{
position:relative;
background-color: #E0E0E0 ;
z-index:1;
}

#streamPlayer{
position:relative;
margin-right:auto;
margin-left:auto;
display:block;
z-index:9;

}

#streamers{
position:relative;
height:600px;
border-top:2px solid #D0D0D0  ;
overflow: auto;
z-index: 10;
}

#streamlist{
height:500px;
width:900px;
position:relative;
list-style:none;
margin-left:auto;
margin-right:auto;
padding-top:50px;
margin-top:0px;
z-index:10;
background-color: blue;
}

#streamlist li{
position: relative;
z-index:4;
padding-left:80px;
list-style:none;
height:60px;
width:150px;
float:left;
margin-right:20px;
margin-bottom:10px;
color:black;
background-color: #D0D0D0 ;
border:1px solid #C0C0C0 ;
display:block;
moz-box-shadow:    1px 1px 1px 1px #787878 ;
-webkit-box-shadow: 1px 1px 1px 1px #787878 ;
box-shadow:         1px 1px 1px 1px #787878 ;
z-index:10;
}

Answer 1

请参阅此http://jsfiddle.net/bsWCA/。我刚刚创建了空li，因为代码中没有li。如果我删除了所有的z-index我能够正常工作。如果你可以用js小提琴发布你的代码，除了视频，它可能很容易。尝试删除z-index，因为据我所知，z-index可能是问题的原因。

//html
<div id="draggablecontainer">
    <div id="streamWrapper">

    </div>

    <div id="streamers">
        <ul id="streamlist">
            <li> Hello </li>
            <li> Hello </li>
            <li> Hello </li>
            <li> Hello </li>
            <li> Hello </li>


        </ul>
    </div>

</div>


//js
$( "#streamWrapper" ).droppable({
      hoverClass: 'hoverdrop',
     accept:"#streamlist li",
      drop: function(event, ui ) {
        var currentID = ui.draggable.attr("id");        
      }
    });

$("#streamlist li").draggable({
scroll:"true",
scrollSensitivity:100,
revert:false,
helper:"clone",
appendTo:"body"
}); 

//css
#draggablecontainer{
position:absolute;
width:100%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
background-color: yellow;

}

#streamWrapper{
position:relative;
padding-top:100px;
height:600px;
font-size:3em;

background-color: red;

}

.hoverdrop{
position:relative;
background-color: #E0E0E0 ;

}

#streamPlayer{
position:relative;
margin-right:auto;
margin-left:auto;
display:block;


}

#streamers{
position:relative;
height:600px;
border-top:2px solid #D0D0D0  ;


}

#streamlist{
height:500px;
width:900px;
position:relative;
list-style:none;
margin-left:auto;
margin-right:auto;
padding-top:50px;
margin-top:0px;

background-color: blue;
}

#streamlist li{
position: relative;

padding-left:80px;
list-style:none;
height:60px;
width:150px;
float:left;
margin-right:20px;
margin-bottom:10px;
color:black;
background-color: #D0D0D0 ;
border:1px solid #C0C0C0 ;
display:block;
moz-box-shadow:    1px 1px 1px 1px #787878 ;
-webkit-box-shadow: 1px 1px 1px 1px #787878 ;
box-shadow:         1px 1px 1px 1px #787878 ;
z-index:10;
}

Answer 2

我发现了问题。 ul位于div #streamlist中，导致它只能在该div中拖动。我完全删除了那个div。