Как ограничить ячейки таблицы куда можно перетаскивать элементы?

Question

[Mehanikum]

У меня есть на странице две таблицы. Я сделал возможность перетаскивать элементы из одной таблицы в другую, ограничил ячейки которые можно перетаскивать с помощью " draggable="false" ", и сейчас мне нужно как-то ограничить ячейки куда я могу перетащить элемент. Чтобы например элемент перетаскивался только в первый столбик таблицы, а во второй нет.



Код скрипта:

<script type="text/javascript">
let td;
                            $('td').on("dragstart", function (event) {
                              td = $(this);
                            });

                            $('table td').on("dragenter dragover drop", function (event) {
                              event.preventDefault();
                              if ( event.type === 'drop' ) {
                                if(td.parent().attr('class') == $(this).parent().attr('class')){
                                  let swap_html = $(this).html();
                                  $(this).html(td.html());
                                  <!-- td.html(swap_html); -->
                                }
                              };
                           });
                        </script>

Может есть какой-то класс который ограничит drop элемента или как-то можно сделать ограничение в скрипте?

Comments

[twobomb]

Так сделай флаг на колонки второй таблицы, типа IsCanDrop....

[Mehanikum]

twobomb, а можно по подробнее как это использовать что-то в интернете не могу найти?

[twobomb]

Mehanikum,

Я сделал возможность перетаскивать элементы из одной таблицы в другую, ограничил ячейки которые можно перетаскивать с помощью " draggable="false"

Тоесть на такой алгоритм и реализацию у вас хватило ума, а на это не хватает?

[Mehanikum]

twobomb, я нашёл готовый код и чуток переделал его под себя, это мой первый проект более менее серьёзный, учусь ещё и многое в плане функционала не знаю

Answer 1

[Aricus]

Нужно их как-то отметить. Можно с помощью классов, но проще - с помощью data-атрибутов. Например, откуда переносите, напишите data-dragfrom="some", а куда переносите - data-dragto="some someelse" (может быть несколько вариантов).
Скрипт изменится примерно так:

...
event.preventDefault();
if (event.type === 'drop') {
    let targetArr;
    if (typeof $(this).attr('data-dragto') === typeof undefined) {
        targetArr = [];
    } else {
        targetArr = $(this).attr('data-dragto').split(' ');
    }
    if ($.inArray( td.attr('data-dragfrom'), targetArr) && td.parent().attr('class') == $(this).parent().attr('class')) {
...

Только разберитесь, что и почему я написал, учиться нужно.

Comments

[Mehanikum]

Спасибо большое, всё работает!