在使用Sortable排序期間/之後顯示使用json創建的列表中的項目位置

我有一個使用json生成的列表，它可以使用RubaXa/Sortable插件進行排序。我需要在排序列表時添加列表中的項目位置。所以當向上或向下移動一個項目時，項目位置指示器將會改變。我評論了一些問題。在使用Sortable排序期間/之後顯示使用json創建的列表中的項目位置

可排序功能：

var listPos; 
Sortable.create(list-group, { 
    handle: '.driver', 
    animation: 150, 
    onMove: function (evt) { 
    evt.dragged; 
    evt.draggedRect; 
    evt.related; 
    evt.relatedRect; 
    listPos = $(this).closest('.list-group').children('.list-group-item').index(this); // error finding the position in the list 
    console.log(evt); // event is shown in the console 
    console.log(listPos); // this is showing always -1 after the event 
    } 
});

的JSON：

[ 
    { 
    "name": "item 1", 
    "acr": "it1" 
    }, 
    { 
    "name": "item 2", 
    "acr": "it2" 
    }, 

    { 
    "name": "item 3", 
    "acr": "it3" 
    }, 

    { 
    "name": "item 4", 
    "acr": "it4" 
    } 
]

的HTML：

<div class="col-md-4"> 
    <div id="printList" class="list-group"> 

    </div> 
</div>

解析/打印JSON：

var xmlhttp = new XMLHttpRequest(); 
var url = "/list.json"; 

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    myFunction(xmlhttp.responseText); 
    } 
} 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function myFunction(response) { 
    showListPos = listPos; // showListPost in undefined 
    var arr = JSON.parse(response); 
    var i; 
    var out = ""; 
    var drawPos = "<div class='position'>" + showListPos + "</div>"; // 

    for (i = 0; i < arr.length; i++) { 
    out += "<div class='list-group-item'>" +     
      "<p>" + drawPos + "</p>" 
      "<h3><span>" + arr[i].name + "</span>" + 
      arr[i].acr + 
      "</h3></div>"; 
    } 
    out += ""; 
    document.getElementById("printList").innerHTML = out; 
}

來源

2016-02-28 Tyra Pululi

你嘗試'$ （this）.closest（'。list-group'）。index（）' –

感謝您的快速回復，是的，我做了相同的結果。輸出是-1 –

得到移動的項目的位置，而移動它，你可以使用onEnd事件，而不是onMove。在onEnd您可以使用訪問位置evt.newIndex。檢查以下代碼段

Sortable.create(sortTrue, { 
 
    group: "sorting", 
 
    sort: true, 
 
    onEnd: function(evt) { 
 

 
    $(evt.item).parent().find('.list-group-item').each(function() { 
 
     $(this).find('span').text($(this).index() + 1); 
 
    }); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div id="result">Drage the list item to see position</div> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 

 

 
    <!-- Latest Sortable --> 
 
    <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script> 
 

 

 
    <!-- sort: true --> 
 
    <div id="sortTrue" class="list-group"> 
 
    <div class="list-group-item"><span>1</span> foo</div> 
 
    <div class="list-group-item"><span>2</span> bar</div> 
 
    <div class="list-group-item"><span>3</span> baz</div> 
 
    <div class="list-group-item"><span>4</span> qux</div> 
 
    <div class="list-group-item"><span>5</span> quux</div> 
 
    </div> 
 

 

 

 

 
</body> 
 

 
</html>

來源

2016-02-28 11:42:45

感謝帕萬，與onSort，onEnd ...事件位置顯示後，下降，我與onMove去看看是否有可能顯示拖動時的當前位置。 –

當前位置意味着您想要在哪個位置放置該元素？ –

我的意思是在下降之前但是我剛纔意識到，拖動所有項目的位置並不值得。我會和onEnd一起去......謝謝... –

在使用Sortable排序期間/之後顯示使用json創建的列表中的項目位置

回答

相關問題