如何在jqm的列表视图中拖放li?

时间:2014-05-27 14:52:22

标签: javascript jquery jquery-mobile

我们可以在查询手机中拖放列表。实际上我按下按钮后添加列表。我们可以使用查询移动使用拖放来改变行的位置。我添加像“tc_1”“tc_2”...我们可以使用拖动“tc_2”来改变位置“tc_1”

http://jsfiddle.net/FZQ8D/15/

$(function () {



    $('#addTestCase').click(function () {
       createTestCase("dd",true,"null")

    });
        });

function createTestCase(testCaseName,iscreatedFromScript,jsonObject) {

    var id;
    if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
        id = "tc_1";
         var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length);
        count = parseInt(count);
          var conunter = count;




    } else {
        id = $("#testCaseContainer li:last").attr('id');
        var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length);
        count = parseInt(count);
          var conunter = count;



        id = id.substring(0, index) + "_" + parseInt(count + 1);
    }
    var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow"><a href="#" style="color: #ffffff!important;">' + id + '</a></li>' + '</ul>' + '</div>';
    $('#testCaseContainer').append(html);




}

1 个答案:

答案 0 :(得分:1)

您需要添加对jQuery UI的引用并使用可排序功能。要使其适用于移动触控,您可能需要添加 jQuery UI Touch Punch

然后只需向容器添加sortable:

$("#testCaseContainer").sortable({
      stop: function( event, ui ) {

      }
}).disableSelection();
  

更新了 FIDDLE