jQuery UI nested sortable

Question

I am not able to make the nested elements sortable in jQuery UI. I am creating the elements on click function of a button and appending it.In the appended element I am not able do the nested sorting. Please help me out in making the nested elements sortable which are created dynamically on click of a button.

The code is as below.

<!DOCTYPE html>
<html>
<head>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="jquery-latest.pack.js"></script>
<script src="jquery-ui.min.js"></script>
<div class="container" style="width:960px; margin:auto;">
  <div style="width:200px; float: left;">
    <input type="button" id="singleText" value="Add Single Text Question" style= " " />
    <input type="button" id="optionsQuestions" value="Add Option Question " style= " " />
  </div>
  <div class="test"> </div>
  <div class="outer" style="width: 750px; float: left;">
    <div class="sortable-outer">
      <div class="inner"> </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.inner').sortable({
            items: ".sortable-inner"
        });
        $('.outer').sortable({
            items: ".sortable-outer"
        });
    });

    (function () {
        var i = 0;
        $("#singleText").live('click', function () {

            var $ctrl = $('<div class="sortable-outer"><input type="text" name="question' + i + '" placeholder="Enter Your Questions Here..."> <br /> <input type="text" name="question' + i + 'Notes" placeholder="Enter Notes Here..."> <br /> <input type="text" name="question' + i + 'SortTitle" placeholder="Enter Short Title Here..."> <br /><label>Required.? </label> <input type="checkbox" value="question' + i + 'Required"> <br /><label>Is Mandatory? </label> <input type="checkbox" value="question' + i + 'Mandatory"> <br /><span class="removeQuestion" id="' + i + '"> remove </span></div>');
            $(".outer").append($ctrl).addClass("questionInContailer");

        });

        $("#optionsQuestions").live('click', function () {

            var $ctrl = $('<div class="outer"><div class="sortable-outer"><p>Outer Item 1</p><div class="inner"><div class="sortable-inner">Inner Item 1</div><div class="sortable-inner">Inner Item 2</div><div class="sortable-inner">Inner Item 3</div></div></div><div class="sortable-outer"><p>Outer Item 2</p><div class="inner"><div class="sortable-inner">Inner Item 1</div><div class="sortable-inner">Inner Item 2</div><div class="sortable-inner">Inner Item 3</div></div></div></div>');
            $(".outer").append($ctrl).addClass("questionInContailer");


        });

    })();
</script>
</body>

You can check this nested sortable plugin mjsarfatti.com/sandbox/nestedSortable, It works with dynamically created elements too. — Prasenjit Kumar Nag
– Prasenjit Kumar Nag, Commented Jun 15, 2012 at 7:33

coolguy · Accepted Answer · 2012-06-15 07:33:50Z

    <script type="text/javascript">
function sorting(){
 $('.inner').sortable({
                items: ".sortable-inner"
            });
            $('.outer').sortable({
                items: ".sortable-outer"
            });
}
        $(document).ready(function(){
           sorting();
        });

      $(document).ready(function(){
            var i = 0;
            $("body").delegate('#singleText','click', function () {

                var $ctrl = $('<div class="sortable-outer"><input type="text" name="question' + i + '" placeholder="Enter Your Questions Here..."> <br /> <input type="text" name="question' + i + 'Notes" placeholder="Enter Notes Here..."> <br /> <input type="text" name="question' + i + 'SortTitle" placeholder="Enter Short Title Here..."> <br /><label>Required.? </label> <input type="checkbox" value="question' + i + 'Required"> <br /><label>Is Mandatory? </label> <input type="checkbox" value="question' + i + 'Mandatory"> <br /><span class="removeQuestion" id="' + i + '"> remove </span></div>');
                $(".outer").append($ctrl).addClass("questionInContailer");
                   sorting(); //calling sorting again
            });

            $("body").delegate('#optionsQuestions','click', function () {

                var $ctrl = $('<div class="outer"><div class="sortable-outer"><p>Outer Item 1</p><div class="inner"><div class="sortable-inner">Inner Item 1</div><div class="sortable-inner">Inner Item 2</div><div class="sortable-inner">Inner Item 3</div></div></div><div class="sortable-outer"><p>Outer Item 2</p><div class="inner"><div class="sortable-inner">Inner Item 1</div><div class="sortable-inner">Inner Item 2</div><div class="sortable-inner">Inner Item 3</div></div></div></div>');
                $(".outer").append($ctrl).addClass("questionInContailer");    
                sorting(); //calling sorting again
            });

        })
    </script>

I found this answer helpful, so here is a jsfiddle of it jsfiddle.net/2S89C

Collectives™ on Stack Overflow

jQuery UI nested sortable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related