JQuery сбрасываемый и перетаскиваемый счет, если правильно - PullRequest
Новая
       2

JQuery сбрасываемый и перетаскиваемый счет, если правильно

0 голосов
/ 25 января 2012

Я новичок в jQuery и в настоящее время заблокирован (я полагаю) простой вопрос.

У меня есть два списка: перетаскиваемый и перетаскиваемый; 2 вопроса об этом:

1) Как узнать предметы, которые выпали? Итак, перечислите все предметы, которые находятся в «выпавшей» зоне.

2) Как проверить, находятся ли брошенные предметы в правильной зоне падения? Каждый из них имеет идентификатор и должен быть удален в правильной зоне (перетащить от 1 до 1).

Сделать это "вживую" легко, просто проверьте, совпадает ли идентификатор пользовательского интерфейса с идентификатором $ (this) с помощью функции drop.

Но я хочу разрешить опускание всегда и пересчитывать каждый раз, сколько сбрасывается правильно. Вы можете использовать счетчик, но опция удаления (см. Пример) сделает это слишком сложным.

Короче говоря, как выполнить итерации и сбросить на них правильность.

КОД: http://jsfiddle.net/setki/BCnyU/

Ответы [ 2 ]

1 голос
/ 27 января 2012

ОК, я нашел решение, хотя я не слишком доволен им, потому что оно выглядит "странно".

Что я делаю, так это добавляю дополнительный класс к Droppable: «ОК». Это класс, который не имеет стиля (но может использоваться для стиля, если требуется). 

if (dragID == dropID) {
  $(this).addClass('OK');
} else {
  $(this).addClass('NOK');
}

Тогда я просто считаю всех, у кого такой стиль 

var numItems = $('.OK').length;
$('.counter').html('Correct: '+numItems +'/5');

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

$(this).removeClass('OK NOK');

Ну, любой может использовать это простое решение, но мне интересно знать, действительно ли в jQuery нет других решений.

Рабочий пример можно найти по адресу: http://jsfiddle.net/setki/BCnyU/

Веселись!

1 голос
/ 25 января 2012

добавить функцию запуска к перетаскиваемому объекту, например: 

$('#yourelement').draggable({ revert: true, start: function() { $(this).addClass('active'); }

Теперь элемент, который вы сейчас перетаскиваете, получает класс "активный". Теперь в функции drop вашего droppable вы можете проверить идентификатор этого элемента следующим образом: 

var dragID = $('.active').attr('id');

Чтобы сравнить это с идентификатором зоны сброса, вам нужно получить идентификатор сброса в var aswell. 

var dropID = $(this).attr('id');

и отсюда вам нужно разделить строки, так как это только число, которое вы хотите сравнить. Не уверен, как работает функция разбиения, просто Google "javascript .split", вы должны получить массив, если, например, разделение для каждого символа "drop1" станет массив, содержащий 5 символов, где последний [4] будет число. Отсюда вы можете просто сравнить эти две разделенные переменные друг с другом. т.е., 

 if(splitted_dragID[4] == splitted_dropID[4]) {
       counter++;
       $('#counter').text('Correct: '+counter);
 }

Это при условии, что у вас есть переменная с именем counter, которая добавляет его к себе каждый раз, когда функция корректна.

Надеюсь, это направит вас в правильном направлении! :)

...