【问题标题】:jQuery UI nested sortablejQuery UI 嵌套可排序
【发布时间】:2012-06-15 07:27:54
【问题描述】:

我无法在 jQuery UI 中使嵌套元素可排序。我在按钮的单击功能上创建元素并附加它。在附加的元素中,我无法进行嵌套排序。请帮助我使嵌套元素可排序,这些元素是通过单击按钮动态创建的。

代码如下。



'); $(".outer").append($ctrl).addClass("questionInContailer"); }); $("#optionsQuestions").live('click', function () { var $ctrl = $('

外部项目 1

内部项目 1
内部项目 2
内部项目 3

外部项目 2

内部项目 1
内部项目 2
内部项目 3
'); $(".outer").append($ctrl).addClass("questionInContailer"); }); })(); 脚本> 正文>

标签: jquery jquery-ui jquery-ui-sortable


【解决方案1】:
    <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>

【讨论】:

猜你喜欢
  • 2013-10-08
  • 2012-11-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-08
  • 2018-03-25
  • 1970-01-01
  • 2011-02-18
相关资源
最近更新 更多