在我的頁面中,我需要將上/下項目的按鈕放在a中,我的客戶端不接受拖放過程,他們想重新排序由按鈕發生的項目。jQueryMobile - 用於列表視圖的向上/向下按鈕
有可能嗎? 我找的樣品,但沒有看到任何形式的這種情況,一般來說,樣品談論jQueryUI和拖/放
在我的頁面中,我需要將上/下項目的按鈕放在a中,我的客戶端不接受拖放過程,他們想重新排序由按鈕發生的項目。jQueryMobile - 用於列表視圖的向上/向下按鈕
有可能嗎? 我找的樣品,但沒有看到任何形式的這種情況,一般來說,樣品談論jQueryUI和拖/放
不完全是一個簡單的答案。
工作實例: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 -->
非常感謝您的支持時間和你的努力,我看到的演示,你告訴不容易實現它,但你創建代碼的主要部分。 – MCunha98
不是內置功能。您需要添加按鈕並編寫腳本。你能提供一些示例代碼嗎? – Twisty
@Twisty類似這樣的,一個簡單的列表視圖... http://jsfiddle.net/MauriceG/mzJkq/ http://demos.jquerymobile.com/1.4.5/listview/ – MCunha98