如何合并Jquery UI可排序代码?

时间:2013-04-26 23:19:38

标签: javascript jquery jquery-ui

我正在尝试将Jquery UI排序到我下面的无序列表中。当我单击下面表单中的按钮时,它会将文本插入#companyassessment_set1,然后提交表单。

当我尝试将javascript包含在可排序部分时,没有任何作用(现有的jquery代码+可排序的功能)。代码在这里:

$(document).ready(function(){
$('#menu-pages').sortable();
});

其余代码:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>

   <script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
   <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>

<script>
jQuery(function () {
    $('#test').click(function (e) {
        e.preventDefault();
        alert('test');
        data = 'Benefits,Predictable hours,Up or out,Job for life,Great corporate strategic vision,Strong profitability,Performance-based,Strong alumni network,Effective managers,Fast growth,Salary and bonus,Little ranking between employees,No working on the weekends,Competitive environment,Great brand for the resume,International opportunities,Brand recognition,Smart people,Stock growth,Perks,No layoffs,Type-A employees,Fast advancement,Reasonable hours'
        $("#companyassessment_set1").val(data);
        $("form#new_companyassessment").submit();

    });
}); 
</script>

    <p>
        <label for="companyassessment_Company Name">Company name</label><br />
        <div class="field_with_errors"><input id="companyassessment_name" name="companyassessment[name]" size="30" type="text" value="" /></div>
    </p>

    <ul class="menu" id="menu-pages">
        <li id="page_1">Home</li>
        <li id="page_2">Blog</li>
        <li id="page_3">About</li>

    </ul>


        <input id="companyassessment_set1" name="companyassessment[set1]" type="hidden" />



<input id="test" type="button" value="Set Value" />

有关如何合并Jquery UI代码的任何建议吗?

2 个答案:

答案 0 :(得分:0)

<script>
$(function() {
$( "#menu-pages" ).sortable();
$( "#menu-pages" ).disableSelection();
});
</script>

http://jqueryui.com/sortable/

你看看这个观点来源

吗?

答案 1 :(得分:0)

您的第二个jquery引用将覆盖jqueryui引用,因此无法识别您的可排序方法。删除它,你应该没问题:

<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>

您定义'data'变量的行最后需要一个分号。