Перетащите информацию таблицы?

0

У меня есть домашняя страница со столом и несколькими "любимыми" папками. Эти папки предназначены для хранения "любимых" строк информации. Пользователи перетаскивают определенные строки информации из домашней таблицы в таблицу папок. Вместо того, чтобы перетаскивать всю строку (потому что мои строки очень широкие, и может быть неясно, в какую папку вы бросаете эту строку), у меня есть значок перед каждым номером случая, который идеально будет хранить информацию для указанной строки. В этом случае это стрелка. То, что мне нужно, - это перетащить эту стрелку и отбросить ее в этой папке, информация из "перетаскиваемой строки" будет добавлена в соответствующую таблицу "Избранное". Этот значок должен исчезнуть при удалении вместе с соответствующей строкой с домашней страницы. Двойной щелчок по папке "откроет" эту папку, чтобы просмотреть избранные строки, как старые, так и новые. Вот моя скрипка

$( ".drag" ).draggable({ revert: "invalid" });

$( ".dropTarget" ).droppable({
    drop: function( event, ui ) {
        var dropped = parseInt($(this).attr('title')) + 1;
        $( this )
            .attr('title',dropped+' entries'); 

        var delay =  $(this);
        delay.prop('disabled', true).addClass('ui-state-highlight')
        setTimeout(function() {
            delay.prop('disabled', false).removeClass('ui-state-highlight');
        }, 2000)
    }
});

$( ".dropTarget" ).dblclick(function() {
    $( ".fav1table" ).fadeIn();
    $( ".main" ).hide();
    //$(this).removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');  
});
Теги:
drag-and-drop

1 ответ

0

Прежде всего, я рекомендую вам изменить тип курсора при наведении указателя мыши на стрелку. Это поможет пользователю. Вам нужно определить, какие строки allready были добавлены в избранное. Решением может быть создание двух классов CSS. normal и favorite. Для каждой строки, которая уже была "одобрена", добавьте favorite класс. Таким образом, у вас появятся стрелки типа class="drag favorite". В CSS просто устанавливаются "благоприятные" стрелки как невидимые или не отображаемые.

В событии drop из .droppable() добавьте класс "любимый" к сброшенной стрелке. Поэтому он больше не будет виден. Вы можете повторно использовать этот класс позже в селекторе, чтобы выбрать все любимые строки, например...

  • 0
    Хорошо, это имеет смысл. Итак, как я могу добавить информацию в любимую таблицу?
  • 0
    В этом случае ваша стрелка должна встраивать информацию о соответствующей строке. Вы можете использовать либо id , либо атрибут data . Как только ваша стрелка будет сброшена, получите соответствующую строку в главной таблице. Например, var rowId = ui.draggable.prop("id"); а затем клонировать строку в новой таблице. var cloned = $(".main").find("tr#"+rowId).clone(); $(".fav1table").append(cloned); , Конечно, предполагается, что обе таблицы имеют одинаковый шаблон, одинаковые столбцы и т. Д. Посмотрите на обновленную скрипку. jsfiddle.net/YK5fg/1
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню