user1118374 user1118374 - 4 years ago 299
Javascript Question

jquery Issues with draggable inside a dialog

I'm having trouble with a draggable/droppable element inside of a dialog. For this example, I just combined two jquery examples. One for dialog and one for droppable.

The dragging and dropping work, but you can't see the element that you are dragging. It does show up when you drop it, but it not visible while dragging it. For what I'm doing, I need to be able to see the element that I'm dragging while it is being dragged.

I created a jsfiddle to show you how it is currently working. http://jsfiddle.net/v2uuF/

<div id="dialog" title="Basic dialog">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2><a href="#">T-Shirts</a></h2>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>

<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>

<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</div>

<button id="opener">Open Dialog</button>

$(function() {
$( "#draggable" ).draggable();
$( "#dialog" ).dialog({
autoOpen: false,
});

$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});

$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});


Once the dialog is open, I want it to work the same way it does in the jquery example : http://jqueryui.com/droppable/#shopping-cart

Does anyone have any ideas why?

Thank you.

Answer Source

It's a z-index issue. You can give your helper a custom class:

$( "#catalog li" ).draggable({
    appendTo: "body",
    helper: "clone",
    start: function(e, ui)
    {
        $(ui.helper).addClass("ui-draggable-helper");
    }
});

Then give it a z-index larger than the ui-dialog:

.ui-draggable-helper { 
    z-index: 5000
} 

Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download