Make parent div sortable, not children

Question

I have the following HTML:

<div class="nestedQuestionGroup">
  <div class="formsection">
  </div>
  <div class="formsection">
  </div>
</div>

<div class="nestedQuestionGroup">
  <div class="formsection">
  </div>
  <div class="formsection">
  </div>
</div>

<div class="nestedQuestionGroup">
  <div class="formsection">
  </div>
  <div class="formsection">
  </div>
</div>

How can I make #nestedQuestionGroup sortable and not the childs within It? The current sortable-function from jquery-ui makes the child sortable, not the parent itself.

Answer 1

From based documentation on jqueryui sortable widget ( http://api.jqueryui.com/sortable/ ), you should try to do this :

html :

<div id="parent-sortable">
    <div class="nestedQuestionGroup">
        <div class="formsection">
        </div>
        <div class="formsection">
        </div>
    </div>

    <div class="nestedQuestionGroup">
        <div class="formsection">
        </div>
        <div class="formsection">
        </div>
    </div>

    <div class="nestedQuestionGroup">
        <div class="formsection">
        </div>
        <div class="formsection">
        </div>
    </div>
</div>

js :

$( "#parent-sortable" ).sortable({
     items: "> .nestedQuestionGroup"
});

You can personalize your sortable with many options like delay, cursor, opacity, axis, classes, etc...

Hope it helped !