jQueryMobile - bouton haut/bas pour listview

Question

Dans ma page je dois mettre des boutons pour les éléments haut/bas dans un, mon client n'accepte pas le processus de glisser/déposer, ils veulent réorganiser les éléments qui se passent par les boutons.

C'est possible? Je cherche des échantillons mais je ne vois aucune sorte de cette situation, en général, les exemples parlent de jQueryUI et glisser/déposer

Answer 1

Pas exactement une réponse facile.

Exemple de travail: https://jsfiddle.net/Twisty/t1ruyg11/16/

Test Mobile: https://jsfiddle.net/Twisty/t1ruyg11/16/show/

HTML

<div data-role="page"> 
    <div data-role="header"> 
    <h1>jQuery mobile Listview with drag and drop</h1> 
    </div> 
    <div data-role="content"> 
    <ul data-role="listview" data-inset="true" data-theme="d" id="lst"> 
     <li data-role="list-divider">Manual Sort List</li> 
     <li class="first"> 
     <span class="ui-icon ui-icon-arrow-1-n up"></span> 
     <span class="ui-icon ui-icon-arrow-1-s down"></span> List Item 1 
     </li> 
     <li> 
     <span class="ui-icon ui-icon-arrow-1-n up"></span> 
     <span class="ui-icon ui-icon-arrow-1-s down"></span> List Item 2 
     </li> 
     <li> 
     <span class="ui-icon ui-icon-arrow-1-n up"></span> 
     <span class="ui-icon ui-icon-arrow-1-s down"></span> List Item 3 
     </li> 
     <li> 
     <span class="ui-icon ui-icon-arrow-1-n up"></span> 
     <span class="ui-icon ui-icon-arrow-1-s down"></span> List Item 4</li> 
     <li class="last"> 
     <span class="ui-icon ui-icon-arrow-1-n up"></span> 
     <span class="ui-icon ui-icon-arrow-1-s down"></span> List Item 5</li> 
    </ul> 
    </div> 
    <!-- /content --> 
</div> 
<!-- /page --> 

CSS

.ui-listview li.ui-li-static { 
    padding-left: 1.5em; 
    position: relative; 
    font-size: 1.4em; 
} 

.ui-listview li.ui-li-static span { 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
} 

.ui-listview li.ui-li-static span.up { 
    margin-left: -1.3em; 
    top: 5px; 
} 

.ui-listview li.ui-li-static span.down { 
    margin-left: -1.3em; 
    top: 30px; 
} 

JavaScript

var elements = { 
    up: $("<span>", { 
    class: "ui-icon ui-icon-arrow-1-n up" 
    }), 
    down: $("<span>", { 
    class: "ui-icon ui-icon-arrow-1-s down" 
    }) 
}; 

function sortRefresh(list) { 
    var id = list.attr("id"); 
    var $lst = $("#" + id); 
    $lst.listview("refresh"); 
    $lst.find(".first .up").remove(); 
    $lst.find(".last .down").remove(); 
    $lst.find(".ui-state-active").removeClass("ui-state-active"); 
} 

function sortMakeListArray(list) { 
    var itemArray = []; 
    list.find(".ui-li:not(.ui-list-divider)").each(function(ind, el) { 
    itemArray.push($(el).text().trim()); 
    }); 
    return itemArray; 
} 

function manualSort(elem, dir) { 
    var $list = elem.parent(); 
    var prevLi = elem.prev(); 
    var nextLi = elem.next(); 
    var temp = elem.detach(); 
    if (dir == "up") { 
    console.log("Moving Temp Up", prevLi); 
    if (temp.hasClass("last")) { 
     temp.removeClass("last"); 
     prevLi.addClass("last"); 
    } 
    if (prevLi.hasClass("first")) { 
     prevLi.removeClass("first"); 
     prevLi.append(elements.up.clone()); 
     temp.addClass("first"); 
    } 
    prevLi.before(temp.prop("outerHTML")); 
    } 
    if (dir == "down") { 
    console.log("Moving Temp Down", nextLi); 
    if (temp.hasClass("first")) { 
     temp.removeClass("first"); 
     nextLi.addClass("first"); 
    } 
    if (nextLi.hasClass("last")) { 
     nextLi.removeClass("last"); 
     nextLi.append(elements.down.clone()); 
     temp.addClass("last"); 
    } 
    nextLi.after(temp.prop("outerHTML")); 
    } 
    sortRefresh($list); 
} 

$(function() { 
    $("#lst .ui-icon").hover(function() { 
    $(this).addClass("ui-state-active"); 
    }, function() { 
    $(this).removeClass("ui-state-active"); 
    }); 
    $("#lst").on("click", ".ui-icon", function(e) { 
    var $t = $(this); 
    var $li = $t.parent(); 
    console.log("Clicked", $t); 
    if ($li.hasClass("first")) { 
     elements.up.clone().appendTo($li); 
    } 
    if ($li.hasClass(".last")) { 
     elements.down.clone().appendTo($li); 
    } 
    if ($t.hasClass("up")) { 
     manualSort($li, "up"); 
    } 
    if ($t.hasClass("down")) { 
     manualSort($li, "down"); 
    } 
    }); 
    sortRefresh($("#lst")); 
}); 

Fondamentalement, nous ajoutons les boutons. Comme cela est conçu pour l'interface utilisateur mobile, j'ai essayé de rendre les boutons aussi grands que possible pour les rendre plus faciles à exploiter. Nous détacherons l'élément de liste et le déplacerons up ou down en fonction du bouton tapé. Conditionnellement, s'il s'agit du premier ou du dernier élément, nous ajoutons ou supprimons des boutons des éléments de la liste.

Mise à jour

Si vous voulez trier par bosse, sans boutons, mais en déterminant s'il y avait un robinet sur la moitié supérieure ou la moitié inférieure de l'élément, vous pouvez le faire:

function sortRefresh(list) { 
 
    console.log("List Refresh"); 
 
    list.listview("refresh"); 
 
} 
 

 
function manualSort(elem, dir) { 
 
    var $list = elem.parent(); 
 
    var $prevLi = elem.prev(); 
 
    var $nextLi = elem.next(); 
 
    var $temp = elem.detach(); 
 
    if (dir == "up") { 
 
    $prevLi.before($temp); 
 
    } 
 
    if (dir == "down") { 
 
    $nextLi.after($temp); 
 
    } 
 
    sortRefresh($list); 
 
} 
 

 
$(function() { 
 
    $("#lst").disableSelection(); 
 
    $("#lst").on("click", ".ui-li-static", function(e) { 
 
    var $li = $(this); 
 
    console.log($li.text() + " clicked"); 
 
    var posY = (e.offsetY !== null) ? e.offsetY : e.originalEvent.layerY; 
 
    var mid = $li.outerHeight(true)/2; 
 
    console.log(posY + "/" + mid); 
 
    if (posY < mid) { 
 
     if ($li.hasClass("ui-first-child")) { 
 
     return false; 
 
     } 
 
     console.log("Move " + $li.text() + " Up"); 
 
     manualSort($li, "up"); 
 
    } else if (posY > mid) { 
 
     if ($li.hasClass("ui-last-child")) { 
 
     return false; 
 
     } 
 
     console.log("Move " + $li.text() + " Down"); 
 
     manualSort($li, "down"); 
 
    } 
 
    }); 
 

 
    $(document).on("mousemove", function(event) { 
 
    var pageY = event.pageY; 
 
    var offsetY = (event.offsetY !== null) ? event.offsetY : event.originalEvent.layerY; 
 
    $(".report").text("pageY: " + pageY + ", offsetY: " + offsetY); 
 
    }); 
 
});

.report { 
 
    font-size: 65%; 
 
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
 
<div data-role="page"> 
 
    <div data-role="header"> 
 
    <h1>jQuery mobile Listview with drag and drop</h1> 
 
    </div> 
 
    <div data-role="content"> 
 
    <ul data-role="listview" data-inset="true" data-theme="d" id="lst"> 
 
     <li data-role="list-divider">Manual Sort List</li> 
 
     <li>List Item 1</li> 
 
     <li>List Item 2</li> 
 
     <li>List Item 3</li> 
 
     <li>List Item 4</li> 
 
     <li>List Item 5</li> 
 
    </ul> 
 
    </div> 
 
    <div class="report"> 
 
    </div> 
 
    <!-- /content --> 
 
</div> 
 
<!-- /page -->

Fiddle: https://jsfiddle.net/Twisty/oh1kon0u/6/

Mobile: https://jsfiddle.net/Twisty/oh1kon0u/6/show/