Clever Geek Handbook

Jquery ui sortable trashbin show and hide event

I have an html table that is sorted using jquery ui. Then I added a tablerow which acts like a trash can. For aesthetic reasons, I want the trashcan to be visible when the user drags a table row. I do this by creating a table row in an active event and I am deleting the table row to deactivate the event. However, I noticed that it no longer removes the item when dragged to the trash can. I tried to fix this using setimeout so that there is a delay before the tablerow disappears, however that doesn't work.

I would also like to know that I can fix this, and how to make it reset instead of instantly appearing ( Example ), and revert back instead of disappearing (reverse to example).

I have a JSfiddle setup here , also here is the html for the table:

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

And this is the javascript I am running

//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();
        }
    });
+3


source to share


2 answers


The problem has to do with triggering the event, I guess. Because you are removing and adding an element every time you have to bind an event every time. You can prevent this by simply adding an inline element and then just changing the css properties.

JSFiddle

Js

$("#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 (first line of body)

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


source


Instead of re-creating and deleting the item, just hide and show it. Add a string to HTML table, hide it on page load and then use this

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

and this one



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

JSFiddle .

0


source






More articles:


All Articles