How to swap elements using Jquery draggable, while transferring the id values ​​​​of parent elements?

Question

JavaScript

Greetings!

Please help me with Jquery draggable problem.

There is a table with players.
You need to drag one $('li.editor') element onto another line so that they end up swapping their value and data-playerid on their parent elements.

Drag and drop works, but it is not possible to get the data-playerid to be moved in places from the parent parentTd. Why do doubles occur or the data does not change.

I tried uploading it to the codepen: codepen.io/gistol/pen/EVZJoZ Web
page: badm-nnov.ru/tournaments/addtour

Here is the source code:

function CheckPlayerValue() {
  var values = new Array();
  $(document).find('td.player-name').each(function() {
    var parentTd = $(this);
    $(parentTd).find('li.item').each(function() {
      var cur_id = $(this).data('playerid');
      values.push(cur_id);
    });
    if (values.length > 0) {
      $(parentTd).attr('data-playerid', values.join(","));
      $(parentTd).parent().find('td.score').each(function() {
        $(this).attr('data-playerid', values.join(","));
        $(this).find('input').attr('data-playerid', values.join(","));
        $(this).parent().find('.tour_place').attr('data-playerid', values.join(","));
        $(this).parent().find('.tour_place input').attr('data-playerid', values.join(","));
      });
    } else {
      $(parentTd).attr('data-playerid', 0);
      $(parentTd).parent().find('td.score').each(function() {
        $(this).attr('data-playerid', 0);
        $(this).find('input').attr('data-playerid', 0);
      });
    }

  });
  console.log(values);
}

$(".player-name div ul div.editor").draggable({
  appendTo: "body",
  helper: "clone",
  cursor: "move",
  revert: "invalid",
  stop: function(event, ui) {
    console.log(event);
    console.log($(ui.helper[0]).children().attr('id'));
    CheckPlayerValue();
  }
});
initDroppable($(".player-name div ul div.editor"));

function initDroppable($elements) {
  $elements.droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-drop-hover",
    accept: ":not(.ui-sortable-helper)",
    over: function(event, ui) {
      var $this = $(this);
    },
    drop: function(event, ui) {
      var $this = $(this);
      var li1 = $('<div class="editor with-placeholder ui-draggable ui-draggable-handle ui-droppable">').append(ui.draggable.html());
      var linew1 = $(this).after(li1);
      var li2 = $('<div class="editor with-placeholder ui-draggable ui-draggable-handle ui-droppable">').append($(this).html());
      var linew2 = $(ui.draggable).after(li2);
      $(ui.draggable).remove();
      $(this).remove();
      if ($(li1).find('input').length > 0) {
        var input = $(li1).find('input');
        createAutocomplete(input);
      }
      if ($(li2).find('input').length > 0) {
        var input = $(li2).find('input');
        createAutocomplete(input);
      }

      initDroppable($(".player-name div ul div.editor"));
      $(".player-name div ul div.editor").draggable({
        appendTo: "body",
        helper: "clone",
        cursor: "move",
        revert: "invalid",
        stop: function(event, ui) {
          console.log(event);
          console.log($(ui.helper[0]).children().attr('id'));
          CheckPlayerValue();
        }
      });

    }
  });

}

Answer 1

There is a problem with intercepting values ​​from related elements. littleguga recommend using the sortable plugin. I decided to just go to the level and move the line. Just had to re-grid the table, but that's not a problem.
I am attaching the code:

function CheckPlayerPosition(table) {

        var tablesizesArray = new Array();
        console.log(table.attr('class'));
        $(document).find('table.' + table.attr('class') + '').each(function () {
            var tablenumber = parseFloat($(this).data('counttable'));
            var tablesize = parseFloat($(this).data('sizetable'));
            var parentTable = $(this);
            var counttr = 1;
            var countcaption = 1;
            var countplace = 1;


            if (tablesize > 0) {
                tablesizesArray[tablenumber] = tablesize - 2;
                if (tablenumber > 1) {
                    var prevtablesizes = 0;
                    $(tablesizesArray).each(function (i, j) {
                        if (i < tablenumber && j > 0) {
                            prevtablesizes += parseFloat(j);
                        }
                    });
                    var countplace = prevtablesizes + 1;

                } else {
                    var countplace = 1;
                }

                $(parentTable).find('tr.bar').each(function () {

                    var countscoretd = $(this).find('td.scorecell').length;
                    var parenttr = $(this);



                    //Проставляем позицию в таблице
                    $(this).find('.position').html('&nbsp;' + counttr + '&nbsp;');
                    $(this).attr('data-startposition', counttr);


                    var playerid = $(this).find('.player-name').data('playerid');
                    if ($(playerid).length) {
                        playerid = 0;
                    }

                    $(this).find('td.scorecell').remove();
                    for (y = 1; y <= tablesize - 2; y++) {
                        if ($(parentTable).hasClass('group-table')) {
                            var row = $(this).find('.place_in_table');
                        }
                        if ($(parentTable).hasClass('prize-table')) {
                            var row = $(this).find('.tour_place');
                        }
                        if (counttr == y) {
                            $('<td data-playerid="' + playerid + '" width="100" class="blackcell scorecell" id="pc1001">&nbsp;</td>').insertBefore(row);
                        }
                        else {
                            $('<td data-playerid="' + playerid + '" class="score scorecell" data-cellid="' + (y) + '">&nbsp;<div id="' + counttr + '" class="match autosize-textarea"><input class="autosize-textarea-editor" data-playerid="" data-againstplayercell="' + (y) + '" type="text" value=""></div></td>').insertBefore(row);
                        }
                    }
                    counttr++;

                    //добавляем номера мест от 1 до конца в призовую таблицу
                    if ($(parentTable).hasClass('prize-table')) {
                        $(parenttr).attr('data-place', countplace);
                    }
                    countplace++;
                });
            }
        });
    }





    function draganddrop(table) {
        //console.log(table.attr('class'));
        $("tr.bar").draggable({
            appendTo: "body",
            helper: "clone",
            cursor: "move",
            revert: "invalid",
            stop: function (event, ui) {
                //console.log(event);
                //console.log($(ui.helper[0]).children().attr('id'));
                //CheckPlayerValue();
                CheckPlayerPosition(table);
            }
        });
        initDroppable($("tr.bar"));
        function initDroppable($elements) {
            $elements.droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-drop-hover",
                accept: ":not(.ui-sortable-helper)",
                over: function (event, ui) {
                    var $this = $(this);
                },
                drop: function (event, ui) {
                    var $this = $(this);
                    var li1 = $('<tr class="bar">').append(ui.draggable.html());
                    var linew1 = $(this).after(li1);
                    var li2 = $('<tr class="bar">').append($(this).html());
                    var linew2 = $(ui.draggable).after(li2);
                    //$(li2).parent().parent().addClass('fffffffffffffffffffffffff');
                    CheckPlayerPosition($(li2).parent().parent());
                    $(ui.draggable).remove();
                    $(this).remove();
                    if ($(li1).find('td.player-name').find('input').length > 0) {
                        var input = $(li1).find('td.player-name').find('input');
                        createAutocomplete(input, table);
                    }
                    if ($(li2).find('input').find('td.player-name').length > 0) {
                        var input = $(li2).find('td.player-name').find('input');
                        createAutocomplete(input, table);
                    }


                    initDroppable($("tr.bar"));
                    $("tr.bar").draggable({
                        appendTo: "body",
                        helper: "clone",
                        cursor: "move",
                        revert: "invalid",
                        stop: function (event, ui) {
                            CheckPlayerPosition(table);
                        }
                    });

                }
            });



        }
    }