jQueryMobile - 用于列表视图的向上/向下按钮

Question

在我的页面中，我需要将上/下项目的按钮放在a中，我的客户端不接受拖放过程，他们想重新排序由按钮发生的项目。

有可能吗？ 我找的样品，但没有看到任何形式的这种情况，一般来说，样品谈论jQueryUI和拖/放

Answer 1

不完全是一个简单的答案。

工作实例：https://jsfiddle.net/Twisty/t1ruyg11/16/

手机测试：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")); 
}); 

基本上，我们添加的按钮。由于这是为移动用户界面设计的，我试图让按钮尽可能大，以便于轻松点击。我们将分离该列表项并根据点击哪个按钮将其移动到up或down。有条件的，如果它是第一个或最后一个项目，我们添加或删除列表项中的按钮。

更新

如果你想通过凹凸进行排序，不带按键，而是通过确定是否有在上半部分或项目的下半部一个水龙头，你可以这样做：

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 -->

小提琴：https://jsfiddle.net/Twisty/oh1kon0u/6/

手机：https://jsfiddle.net/Twisty/oh1kon0u/6/show/