Изменение порядка строк таблицы HTML с помощью перетаскивания

Ответ 1

благодаря Джим Петкусу, который дал мне прекрасный ответ. но я пытался решить свой собственный script, чтобы не менять его на другой плагин. Моей главной задачей было не использовать независимый плагин и делать то, что я хотел, просто используя ядро ​​jquery!

и угадайте, что я нашел проблему.

var title = $("em").attr("title");
$("div").text(title);

это то, что я добавляю к своим script и дующим кодам в свою часть html:

<td> <em title=\"$weight\">$weight</em></td>

и нашел каждое значение строки $value

еще раз спасибо Джим Петкус

Ответ 2

JQuery UI сортируемый плагин обеспечивает переупорядочение перетаскивания. Кнопка сохранения может извлекать идентификаторы каждого элемента для создания строки с разделителями-запятыми из этих идентификаторов, добавленных в скрытое текстовое поле. Текстовое поле возвращается на сервер, используя обратную передачу async.

Этот пример скрипта переупорядочивает элементы таблицы, но не сохраняет их в базе данных.

Сортируемый плагин принимает одну строку кода, чтобы превратить любой список в сортируемый список. Если вы хотите их использовать, он также предоставляет CSS и изображения для визуального воздействия на сортируемый список (см. Пример, с которым я связан). Однако разработчики должны предоставить код для извлечения элементов в новом порядке. Я вставляю уникальные идентификаторы каждого элемента в списке как атрибут HTML, а затем извлекаю эти идентификаторы через jQuery.

Например:

// ----- code executed when the document loads
$(function() {
    wireReorderList();
});

function wireReorderList() {
    $("#reorderExampleItems").sortable();
    $("#reorderExampleItems").disableSelection();
}

function saveOrderClick() {
    // ----- Retrieve the li items inside our sortable list
    var items = $("#reorderExampleItems li");

    var linkIDs = [items.size()];
    var index = 0;

    // ----- Iterate through each li, extracting the ID embedded as an attribute
    items.each(
        function(intIndex) {
            linkIDs[index] = $(this).attr("ExampleItemID");
            index++;
        });

    $get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(",");
}

Ответ 3

Очевидно, этот вопрос плохо описывает проблему OP, но этот вопрос является лучшим результатом поиска для перетаскивания, чтобы изменить порядок строк таблицы, поэтому я отвечу на него. Я не был заинтересован в том, чтобы использовать jQuery UI для чего-то такого простого, так что вот решение для jQuery:

<style>
.grab { cursor: grab; }
.grabbed { box-shadow: 0 0 13px #000; }
.grabCursor, .grabCursor * { cursor: grabbing !important; }
</style>

<table>
<tr><th>...</th></tr>
<tr><td class="grab">&#9776;</td><td>...</td></tr>
</table>

<script>
$(".grab").mousedown(function (e) {
    var tr = $(e.target).closest("TR"), si = tr.index(), sy = e.pageY, b = $(document.body), drag;
    if (si == 0) return;
    b.addClass("grabCursor").css("userSelect", "none");
    tr.addClass("grabbed");
    function move (e) {
        if (!drag && Math.abs(e.pageY - sy) < 10) return;
        drag = true;
        tr.siblings().each(function() {
            var s = $(this), i = s.index(), y = s.offset().top;
            if (i > 0 && e.pageY >= y && e.pageY < y + s.outerHeight()) {
                if (i < tr.index())
                    tr.insertAfter(s);
                else
                    tr.insertBefore(s);
                return false;
            }
        });
    }
    function up (e) {
        if (drag && si != tr.index()) {
            drag = false;
            alert("moved!");
        }
        $(document).unbind("mousemove", move).unbind("mouseup", up);
        b.removeClass("grabCursor").css("userSelect", "none");
        tr.removeClass("grabbed");
    }
    $(document).mousemove(move).mouseup(up);
});
</script>

Обратите внимание, si == 0 и i > 0 игнорирует первую строку, которая для меня содержит теги TH. Замените alert вашей логикой "перетаскивание закончено".

Ответ 4

Я хорошо работаю с ним

<script>
    $(function () {

        $("#catalog tbody tr").draggable({
            appendTo:"body",
            helper:"clone"
        });
        $("#cart tbody").droppable({
            activeClass:"ui-state-default",
            hoverClass:"ui-state-hover",
            accept:":not(.ui-sortable-helper)",
            drop:function (event, ui) {
                $('.placeholder').remove();
                row = ui.draggable;
                $(this).append(row);
            }
        });
    });
</script>

Ответ 5

Вы можете посмотреть jQuery Sortable. Я использовал его для изменения порядка строк таблицы.

Ответ 6

Легко для плагина jquery TableDnd

$(document).ready(function() {

    // Initialise the first table (as before)
    $("#table-1").tableDnD();

    // Make a nice striped effect on the table
    $("#table-2 tr:even').addClass('alt')");

    // Initialise the second table specifying a dragClass and an onDrop function that will display an alert
    $("#table-2").tableDnD({
        onDragClass: "myDragClass",
        onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
            $(table).parent().find('.result').text(debugStr);
        },
        onDragStart: function(table, row) {
            $(table).parent().find('.result').text("Started dragging row "+row.id);
        }
    });
});

Плагин (TableDnD): https://github.com/isocra/TableDnD/

Демо: http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/

CDN: https://cdn.jsdelivr.net/jquery.tablednd/0.8/jquery.tablednd.0.8.min.js