Когда я перетаскиваю элемент в другой элемент div, значок закрывается элементом div, почему? JqueryUI

Question

Когда я перетаскиваю элемент в другой элемент div, значок закрывается элементом div, почему? JqueryUI

0

Перетаскиваемый объект - это li, и я перетаскиваю его в желтый div. По какой-то причине желтый div накладывает мой перетаскиваемый объект.

Мой z-индекс для li и ul выше по сравнению с желтым и красным.

Я что-то упускаю?

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

Instinct 04 окт. 2013, в 22:44

Источник

0

Нам нужно увидеть HTML и CSS
Jack Pettinger 04 окт. 2013, в 20:02
0

размещены, есть идеи?
Instinct 04 окт. 2013, в 20:14

Теги:

jquery

html

css

jquery-ui

2 ответа

Ещё вопросы

Kumar R · Answer 1 · 2013-10-04T18-13-00.000Z

См. Это http://jsfiddle.net/bsWCA/. Я просто создал пустую ли, поскольку в вашем коде не было никакого имени. Если бы я удалил все 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;
}

Instinct · Answer 2 · 2013-10-04T18-06-00.000Z

Я нашел проблему. ul находилась внутри div #stream, что заставляло его только перетаскивать в пределах этого div. Я просто полностью удалил этот div.