@Mehanikum

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

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

607d1a66ee983340782080.png

Код скрипта:
<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 элемента или как-то можно сделать ограничение в скрипте?
  • Вопрос задан
  • 52 просмотра
Решения вопроса 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')) {
...

Только разберитесь, что и почему я написал, учиться нужно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы