javascript - JQueryUI draggable object hidden behind droppable -

javascript - JQueryUI draggable object hidden behind droppable -

i've seen similar questions have tried answers people had accepted, , nil working. dynamically generating 3 divs, each ul has draggable elements, , ul droppable. however, unless utilize helper clone, dragged element disappears behind other div/ul's exist on page. not want drag clone. have tried using stack alternative no avail. tried using accept:draggable... no dice. appears issue z-index. hierarchy of dom each of these 3 divs are:

<div><ul><li><a><h2>somecontent</h2></a><li><ul><div>

and below function makes <li> draggable since click on <a>.

function moveme(hur){ $hur = $(hur); $hur.parent().draggable({ //helper: "clone", appendto: "body", stack: "ul", cursor: "move" }); $hur.parents('#stickyboard').children('.storediv').children('ul').droppable({ accept: ".draggable" }); $hur.parents('#stickyboard').children('.progressdiv').children('ul').droppable({ accept: ".draggable" }); $hur.parents('#stickyboard').children('.donediv').children('ul').droppable({ accept: ".draggable" /*over: function(event,ui) { ui.draggable.css('z-index',100); ui.draggable.children('a').css('z-index',101); } */ }); };

the issue not beingness dragged, fact disappears behind other <ul>'s. whatever see commented out in code things have tried no luck. help appreciated.

the problem set overflow:hidden .stickylist. it's effect of hiding overflow content, not caused z-index. understand may want utilize overflow:hidden prevent item beingness dragged out of list towards header. it's of course of study not way go, because causes new problem asked. prevent item beingness dragged upwards out of list, can utilize containment property can take array of coordinates of rectangle limiting draggable region. top left point should have y bottom of header (it's not exact) while bottom right point should have y , x big possible.

$('a').parent().draggable({ //helper: "clone", appendto: "body", stack: "ul", cursor: "move", /* add together */ containment: [0,100,10000,10000] }); updated demo.

here can see .draggable() containment option, can receive array.

javascript jquery css jquery-ui jquery-ui-draggable