У меня есть домашняя страница со столом и несколькими "любимыми" папками. Эти папки предназначены для хранения "любимых" строк информации. Пользователи перетаскивают определенные строки информации из домашней таблицы в таблицу папок. Вместо того, чтобы перетаскивать всю строку (потому что мои строки очень широкие, и может быть неясно, в какую папку вы бросаете эту строку), у меня есть значок перед каждым номером случая, который идеально будет хранить информацию для указанной строки. В этом случае это стрелка. То, что мне нужно, - это перетащить эту стрелку и отбросить ее в этой папке, информация из "перетаскиваемой строки" будет добавлена в соответствующую таблицу "Избранное". Этот значок должен исчезнуть при удалении вместе с соответствующей строкой с домашней страницы. Двойной щелчок по папке "откроет" эту папку, чтобы просмотреть избранные строки, как старые, так и новые. Вот моя скрипка
$( ".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');
});
Прежде всего, я рекомендую вам изменить тип курсора при наведении указателя мыши на стрелку. Это поможет пользователю. Вам нужно определить, какие строки allready были добавлены в избранное. Решением может быть создание двух классов CSS. normal
и favorite
. Для каждой строки, которая уже была "одобрена", добавьте favorite
класс. Таким образом, у вас появятся стрелки типа class="drag favorite"
. В CSS просто устанавливаются "благоприятные" стрелки как невидимые или не отображаемые.
В событии drop
из .droppable()
добавьте класс "любимый" к сброшенной стрелке. Поэтому он больше не будет виден. Вы можете повторно использовать этот класс позже в селекторе, чтобы выбрать все любимые строки, например...
id
, либо атрибутdata
. Как только ваша стрелка будет сброшена, получите соответствующую строку в главной таблице. Например,var rowId = ui.draggable.prop("id");
а затем клонировать строку в новой таблице.var cloned = $(".main").find("tr#"+rowId).clone(); $(".fav1table").append(cloned);
, Конечно, предполагается, что обе таблицы имеют одинаковый шаблон, одинаковые столбцы и т. Д. Посмотрите на обновленную скрипку. jsfiddle.net/YK5fg/1