Question

<ul style="padding: 5px; margin-left: 20px;">
Hardware
<li style="padding: 10px; margin-left: 40px;">Product 1</li>
<li style="padding: 10px; margin-left: 40px;">Product 2</li>
<li style="padding: 10px; margin-left: 40px;">Product 3</li>
<li style="padding: 10px; margin-left: 40px;">Product 4</li>
<li style="padding: 10px; margin-left: 40px;">Product 5</li>
</ul>

我有这个结构我想做一个重新排序的界面，用户可以通过点击向上箭头在产品中移动产品5同样带来一些东西。我想用jQuery的javascript做到这一点。我只需要提一下如何正确地做到这一点。

Answer 1

演示： http://jsfiddle.net/ruisoftware/ECpfK/

此代码可帮助您入门：

var $moveProduct = $("li").eq(4); // product5

$("#up").click(function() {
    $moveProduct.prev().before($moveProduct);
});

$("#down").click(function() {
    $moveProduct.next().after($moveProduct);
});

它可以上下移动产品。

我通过将内联css移动到单独的样式表来简化您的标记。

Answer 2

如果你正在使用jQuery，你可能想要考虑jQuery-UI。

构建自己的内容非常简单，但现有的内容非常简洁：http://jqueryui.com/demos/draggable/#sortable

Answer 3

你基本上有两件事需要解决。您必须移动这些DOM元素，并且必须找到一种方法来收集输入元素中的当前顺序（以便能够将其发送到服务器）。

使用jQuery的魔术功能移动元素非常简单。 @Jose给了你一个简单但有效的例子。

我建议您将产品的ID保存在data-属性中，因为这样可以更轻松地使用这些属性。您将需要一种方法来收集当前设置顺序中的ID并将它们保存在逗号分隔的字符串中（每当订单更改时，您必须调用它）。你可以发送到服务器。

所以使用这样的标记：

<ol class="orderable-list">
    <li data-id="24">Terrific Product</li>
    <li data-id="32">Amazing Product</li>
    <li data-id="11">Must-buy Product</li>
<ol>
<input type="hidden" id="current-order" />

您可以使用.map()轻松收集当前订单并将其保存到输入中：

var order = $('.orderable-list li').map(function () {
    return $(this).data('id');
}).get();

$('#current-order').val(order.join(','));

请检查this jsFiddle Demo。

我想写一个重新排序的用户界面？怎么做？

3 个答案: