jQuery UI嵌套可排序 [英] jQuery UI nested sortable
本文介绍了jQuery UI嵌套可排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法使嵌套元素在jQuery UI中可排序.我在按钮的点击功能上创建元素并将其附加.在附加的元素中，我无法进行嵌套排序.请帮助我使嵌套元素可排序，这些嵌套元素是通过单击按钮动态创建的.
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>
推荐答案
<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>
这篇关于jQuery UI嵌套可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
