jquery ui 可排序垃圾箱显示和隐藏事件答案

【问题标题】：jquery ui sortable trashbin show and hide on eventjquery ui 可排序垃圾箱显示和隐藏事件
【发布时间】：2015-07-29 21:26:59
【问题描述】：

我有一个可以使用 jquery ui 排序的 html 表。然后，我添加了一个充当垃圾桶的 tablerow。出于美学原因，我只希望在用户拖动表格行时看到垃圾桶。我通过在活动事件上创建表格行并删除停用事件的表格行来做到这一点。但是我注意到当它被拖入垃圾箱时它不再删除该项目。我试图通过使用 settimeout 来解决这个问题，以便在 tablerow 消失之前有一个延迟，但这不起作用。

我也想知道我可以修复它，以及如何让它下拉而不是立即弹出（Example），然后向上移动而不是消失（与示例相反）。

我有一个JSfiddle setup here，这里也是表格的 html：

<table class="table" id="tableDevices">
    <thead>
    <tr>
        <th>Name</th>
        <th>Protocol</th>
        <th>Systemcode</th>
        <th>Unitcode</th>
        <th>State</th>
        <th></th>
    </tr>
    </thead>
<tbody class="ui-sortable">
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr style="display: table-row;"></tr>
    <tr class="ui-sortable-handle" style="display: table-row;">
        <td class="AllowEdit" contenteditable="true">BBQ</td>
        <td class="AllowEdit" contenteditable="true">pollin</td>
        <td class="AllowEdit" contenteditable="true">31</td>
        <td class="AllowEdit" contenteditable="true">4</td>
        <td class="AllowEdit" contenteditable="true">off</td>
        <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td></tr>
    <tr class="ui-sortable-handle" style="display: table-row;">
        <td class="AllowEdit" contenteditable="true">Server</td>
        <td class="AllowEdit" contenteditable="true">pollin</td>
        <td class="AllowEdit" contenteditable="true">15</td>
        <td class="AllowEdit" contenteditable="true">1</td>
        <td class="AllowEdit" contenteditable="true">off</td>
        <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td></tr>
    <tr class="ui-sortable-handle" style="display: table-row;">
        <td class="AllowEdit" contenteditable="true">Kitchen</td>
        <td class="AllowEdit" contenteditable="true">pollin</td>
        <td class="AllowEdit" contenteditable="true">31</td>
        <td class="AllowEdit" contenteditable="true">1</td>
        <td class="AllowEdit" contenteditable="true">off</td>
        <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></td>
    </tr>
    <tr style="display: table-row;"></tr>
    </tbody>
</table>

这是我正在运行的 javascript

//Code to drag and drop order table
    var fixHelperModified = function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {
            $(this).width($originals.eq(index).width())
        });
        return $helper;
    };

    $("#tableDevices tbody").sortable({
        activate: function (event, ui) {
            $('#tableDevices > tbody > tr:first').before('<tr><td colspan="6" id="trash" class="trash">Trash</td></tr>');
        }
    }, {
        deactivate: function (event, ui) {
            setTimeout(function () {
                $("#trash").remove();
            }, 500);
        }
    }, {cancel: '[contenteditable]'}, {connectWith: '#trash'}, {helper: fixHelperModified});


    $("#trash").droppable({
        accept: "#tableDevices tr",
        hoverClass: "ui-state-hover",
        drop: function (ev, ui) {
            ui.draggable.remove();
        }
    });

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

我认为问题与事件触发有关。因为每次您都必须删除和添加元素，所以每次都必须绑定事件。您可以通过添加内联元素然后更改 css 属性来防止这种情况。

JSFiddle

$("#tableDevices tbody").sortable({
    activate: function (event, ui) {
        $('#trash').css('display', 'table-row');
    }
}, {
deactivate: function (event, ui) {
        $("#trash").css('display', 'none');
}

CSS

#trash {
   display: none;
}

HTML（tbody 的第一行）

<tr id="trash"><td colspan="6" class="trash">Trash</td></tr>

【讨论】：

【解决方案2】：

不要重复地创建和删除元素，只需隐藏和显示它。将该行添加到表格的HTML中，页面加载时隐藏，然后使用这个

activate: function (event, ui) {
            $('#trash').show();
}

还有这个

deactivate: function (event, ui) {
            $("#trash").hide();
}

JSFiddle.

【讨论】：