Drag and Drop - Liveweave

//Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ ÑÐ¾Ð·Ð´Ð°ÐµÑ‚ ÑÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ‹ Ð¸ Ð¸Ñ… ÑÐ²Ð¾Ð¹ÑÑ‚Ð²Ð°
function elmt(name, attributes) {
    var node = document.createElement(name);

if (attributes) {
        for (var attr in attributes)
            if (attributes.hasOwnProperty(attr))
                node.setAttribute(attr, attributes[attr]);
    }
    for (var i = 2; i < arguments.length; i++) {
        var child = arguments[i];
        if (typeof child == "string")
            child = document.createTextNode(child);
        node.appendChild(child);
    }
    return node;
}

//Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ð¿ÐµÑ€ÐµÐ¼ÐµÑ‰ÐµÐ½Ð¸Ñ ÑÑ‚Ñ€Ð¾Ðº Ñ‚Ð°Ð±Ð»
function dragDropTable() {
    var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width());
        });
        return ui;
    };
    $(".box_table tbody").sortable({
        helper: fixHelper
    }).disableSelection();
//Ð¾Ñ‚Ð¾Ð±Ñ€Ð°Ð¶ÐµÐ½Ð¸Ðµ Ð¸ÐºÐ¾Ð½ÐºÐ¸
    $("table tr").hover(function () {
        $(this.cells[0]).addClass('showDragHandle');
    }, function () {
        $(this.cells[0]).removeClass('showDragHandle');
    });
}

//Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñ€ÐµÐ´Ð°ÐºÑ‚Ð¸Ñ€Ð²Ð¾Ð°Ð½Ð¸Ñ ÑÑ‚Ñ€Ð¾ÐºÐ¸ Ñ‚Ð°Ð±Ð»
function editTask() {
    //Ð¿Ð¾Ð»ÑƒÑ‡Ð°ÐµÐ¼ Ð´Ð¾ÑÑ‚ÑƒÐ¿ Ðº ÑÑ‡ÐµÐ¹ÐºÐµ
    var accessToValue = $(this).closest('tr').find('td.context');

//ÐŸÐžÐ›Ð£Ð§ÐÐ•Ðœ Ð¡ÐžÐ”Ð•Ð Ð–Ð˜ÐœÐžÐ• Ð¯Ð§Ð•Ð™ÐšÐ˜
    var val = accessToValue.html();
    var code = '<input type="text" id="edit" value="' + val + '" style="border: none"/>';
    //ÑƒÐ´Ð°Ð»ÑÐµÐ¼ ÑÐ¾Ð´ÐµÑ€Ð¶Ð¸Ð¼Ð¾Ðµ Ð¸ Ð²ÑÑ‚Ð°Ð²Ð»ÑÐµÐ¼ Ð¿Ð¾Ð»Ðµ
    accessToValue.empty().append(code);
    //ÑƒÑÑ‚Ð°Ð½Ð°Ð²Ð»Ð¸Ð²Ð°ÐµÐ¼ Ñ„Ð¾ÐºÑƒÑ Ð½Ð° Ð¿Ð¾Ð»Ðµ
    $('#edit').focus();
    //Ð¿Ñ€ÑÑ‡ÐµÐ¼ Ð¿Ð¾Ð»Ðµ Ð¸ Ð¾Ð±Ð½Ð¾Ð²Ð»ÑÐµÐ¼ Ð´Ð°Ð½Ð½Ñ‹Ðµ
    $('#edit').blur(function () {
        var val = $(this).val();
        accessToValue.html(val);
    });
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            $('#edit').blur();
        }
    });
}

//Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ð´Ð¾Ð±Ð°Ð²Ð¸Ñ‚ÑŒ Ð·Ð°Ð´Ð°Ñ‡Ñƒ Ð² Ñ‚Ð°Ð±Ð»(Ð´Ð¾Ð±Ð°Ð²Ð¸Ñ‚ÑŒ ÑÑ‚Ñ€Ð¾ÐºÑƒ)
function addTask() {

var valueOfTask = $(this).siblings('.box_input').val();
    var table = $(this).siblings('.box_table');

//delete task
    var deleteTask = elmt("button",{style: "display: inline-block; cursor: pointer;"},"Delete");
    deleteTask.onclick = function (e) {
        e.target.closest('tr').remove();//this
    };

//edit task
    var edit = elmt("button",{style: "display: inline-block; cursor: pointer;"},"Edit");
    edit.onclick = editTask; //editTask - Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð° Ð²Ñ‹ÑˆÐµ

td1 = checkbox;
    td2.innerHTML = valueOfTask;
    td3 = edit;
    td4 = deleteTask;

tr.appendChild(td0);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    table.append(tr);

dragDropTable();
}

document.querySelector("#addTODOLis").addEventListener("click", function () {
    var contentBlock = document.querySelector("#contentBlock");

contentBlock.appendChild(div).appendChild(input);
    contentBlock.appendChild(div).appendChild(button);
    contentBlock.appendChild(div).appendChild(table).appendChild(tbody);

$('.box_btn').click(addTask);
});