jquery draggable the entire div

Question

When using draggable, how can I grab the whole div and not just the words in the div?

<div id='something'>
   <ul>
      <li class='draggable' id='frank'>Frank</li>
      <li class='draggable' id='Joe'>Joe</li>
  </ul>
</div>

<div id='somethingElse'>
   <div class='dragme' id='yes'>Yes</div>
   <div class='dragme' id='no'>no</div>
</div>

  $(function() {
      $( "li" ).draggable();
      $(".dragme").draggable();
  });

Here is my JSFiddle

Fiddle

Answer 1

Add the draggable class to the DIVs you want to drag, and remove it from the LI elements:

<div class='draggable' id='something'>
    <ul>
        <li id='frank'>Frank</li>
        <li id='Joe'>Joe</li>
    </ul>
</div>
<br>
    <br>
        <div class='draggable' id='somethingElse'>
            <div id='yes'>Yes</div>
            <div id='no'>no</div>
        </div>

Then call .draggable on everything that has the draggable class.

$(function() {
    $( ".draggable").draggable();
});

Answer 2

Make the containers draggable, not the list items:

$("#something, #somethingElse").draggable();

jsFiddle example

Answer 3

Just call .draggable() on the top-level element which you want to be draggable. I would recommend using a special class (see Tony Hinkle's answer), but without changing your HTML code, it would be:

$(function() {
  $( "#something, #somethingElse" ).draggable();
});

Or if you want to select containers based on the fact that they contain elements of specific class, then use .has() selector:

$(function() {
  $( "div:has(.dragme), div:has(.draggable)" ).draggable();
});

Answer 4

$("#something").draggable();
$("#somethingElse").draggable();