jquery Issues with draggable inside a dialog

Question

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 1

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

Answer 2

I had success simply by removing appendTo: "body". The helper <li> gets appended outside of the absolutely positioned dialog box and so appears behind it (z-index). Let it get appended to the <ul> instead.

$("#catalog li").draggable({
    helper: "clone"
});

Example below:

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

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

  /*$( "#catalog" ).accordion();*/
  $("#catalog li").draggable({
    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");
    }
  });
  
});

h1 {
  padding: .2em;
  margin: 0;
}
#products {
  float: left;
  width: 500px;
  margin-right: 2em;
}
#cart {
  width: 200px;
  float: left;
  margin-top: 1em;
}
#cart ol {
  margin: 0;
  padding: 1em 0 1em 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />

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

View on JSFiddle

Answer 3

Remove the "appendTo: "body",". It is working fine on the jsfiddle