1

Здравствуйте! Весь код Fiddle

Для drag and drop использую jquery ui

Код который использую

//перемещение tr для таблицы
$('.table-media-center tbody').sortable();  

  // tr таблицы, которую хотелось бы перенести вверхную таблицу
  $("#tableUploadMediaDifferent tbody").draggable({
    helper: function() {
    var selected = $('#tableUploadMediaDifferent tr.selectedRow');
    if (selected.length === 0) {
      selected = $(this).addClass('selectedRow');
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone().removeClass("selectedRow"));
    return container;
    }
  });

 // таблица, куда перемещаем
  $("#tableUploadMedia").droppable({
    drop: function(event, ui) {
    //$(this).append(ui.helper.children());
    //$('.selectedRow').remove();
    }
  });

но tr с нижней таблицы в верхнюю не переносится

Подскажите, где я допустил ошибку?

1 ответ 1

1

Если нужен функционал переноса элемента из одного контейнера в другой, почему бы не использовать jQuery UI Sortable и его свойство connectWith.

Свойством connectWith задаёт селектор другого sortable-контейнера, в который можно переносить элементы из текущего.

Представленный в вопросе код нужно переписать следующим образом:

$('.table-media-center tbody').sortable();  

$("#tableUploadMediaDifferent tbody").sortable({
  helper: function() {
    var selected = $('#tableUploadMediaDifferent tr.selectedRow');
    if (selected.length === 0) {
      selected = $(this).addClass('selectedRow');
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone().removeClass("selectedRow"));
    return container;
  },
  connectWith: '.table-media-center tbody'
});

И весь код на JSFiddle

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.