Search code examples
jquerydraggablejquery-ui-draggable

Make full dt dd draggable using jquery

I have a jsfiddle on which i would like to make full dt content dragable.

how would i do that can any one please help me on this.

JSFIDDEL

 <dl id="sortable1">
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>
<dt class="ui-state-default">Title</dt>
<dd>Hello</dd>

</dl>

JS COde

     $( function() {
    $( "#sortable" ).sortable();

  } );
Solution

  • If I understand the question correctly, you want to be able to drag the "Title" and "Hello" as one item?

    If so just wrap each item in a div:

      <div>
    <dt class="ui-state-default">Title</dt>
    <dd>Hello</dd>
  </div>

    Fiddle: http://jsfiddle.net/5p2ynsLx/2/