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"));
});

基本上，我们添加按钮。由于这是为移动UI设计的，我尝试使按钮尽可能大，以便更轻松地点按。我们将分离列表项，并根据点击的按钮移动up或down。有条件地，如果它是第一个或最后一个项目，我们在列表项中添加或删除按钮。

<强>更新

如果你想通过凹凸排序，没有按钮，但是通过确定项目的上半部分或下半部分是否有点击，你可以这样做：

＆＃13;

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);
  });
});

＆＃13;

.report {
  font-size: 65%;
}

＆＃13;

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

＆＃13;

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

移动：https://jsfiddle.net/Twisty/oh1kon0u/6/show/

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

1 个答案: