jQuery UI嵌套排序

我無法在jQuery UI中對嵌套元素進行排序。我在一個按鈕的點擊功能上創建元素並添加它。在附加的元素中，我無法進行嵌套排序。請幫助我製作可點擊按鈕動態創建的嵌套元素。jQuery UI嵌套排序

代碼如下。

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

來源

2012-06-15 Vijay

您可以檢查此嵌套排序插件http://mjsarfatti.com/sandbox/nestedSortable/，它的工作原理與動態創建的元素了。 –

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

來源

2012-06-15 07:33:50 coolguy

我發現這個答案有幫助，所以這裏是一個jsfiddle它http://jsfiddle.net/2S89C/ –

jQuery UI嵌套排序

回答

相關問題