How to select 2 class as a droppable? - jquery-ui

Question

I really need help here. I can't find a solution on how to select class="cell active"
for droppable. You can see my code below.
$('.cell').droppable({
drop: function(event, ui) {
var pieceValue = ui.helper.data('value');
var toBoard = $(this).data('square');
var splitResult = toBoard.split(',')
board[splitResult[0]][splitResult[1]] = pieceValue;
$(this).append(ui.draggable);
}
});
I want to use class="cell active" for droppable, but what should my selector be?
http://jsfiddle.net/4KLHs/

Answer 1

If I understand what you're looking for then your selector will be: $('.cell.active')
$('.cell.active').droppable({
drop: function(event, ui) {
var pieceValue = ui.helper.data('value');
var toBoard = $(this).data('square');
var splitResult = toBoard.split(',');
board[splitResult[0]][splitResult[1]] = pieceValue;
$(this).append(ui.draggable);
}
});
Looking at your code in the jsFiddle this is what I would suggest:
// Use this function to add the active class and tie the droppable interaction to
function makeDroppable(element) {
element.addClass('active');
element.droppable({
drop: function (event, ui) {
var pieceValue = ui.helper.data('value');
var toBoard = $(this).data('square');
var splitResult = toBoard.split(',')
board[splitResult[0]][splitResult[1]] = pieceValue;
$(this).append(ui.draggable);
}
});
}
Then I would cause the div's to be passed to the above function as shown below:
$('.draggable').each(function (index, div) {
$(div).draggable({
snap: '#board',
revertDuration: 500,
cursor: 'move',
opacity: 0.50,
helper: 'clone',
containment: '#board',
revert: function (event, ui) {
$(this).data("value").originalPosition = {
top: 0,
left: 0
};
return !event;
},
start: function () {
var from = $(this).parent().attr('data-square');
var splitSquare = from.split(',');
splitSquare[0] = splitSquare[0];
splitSquare[1] = splitSquare[1] - 2 + 2;
var joinSquare = splitSquare.join();
var div1 = $("div[data-square='" + joinSquare + "']");
makeDroppable(div1); //<- pass in the element to the function
splitSquare[0] = splitSquare[0];
splitSquare[1] = splitSquare[1] - 2 + 3;
var joinSquare = splitSquare.join();
var div2 = $("div[data-square='" + joinSquare + "']");
makeDroppable(div2); //<- pass in the element to the function
splitSquare[0] = splitSquare[0];
splitSquare[1] = splitSquare[1] - 2;
var joinSquare = splitSquare.join();
var div3 = $("div[data-square='" + joinSquare + "']");
makeDroppable(div3); //<- pass in the element to the function
splitSquare[0] = splitSquare[0] - 2 + 3;
splitSquare[1] = splitSquare[1] - 2 + 3;
var joinSquare = splitSquare.join();
var div4 = $("div[data-square='" + joinSquare + "']");
makeDroppable(div4); //<- pass in the element to the function
splitSquare[0] = splitSquare[0] - 2;
splitSquare[1] = splitSquare[1];
var joinSquare = splitSquare.join();
var div5 = $("div[data-square='" + joinSquare + "']");
makeDroppable(div5); //<- pass in the element to the function
}
});
});
http://jsfiddle.net/4KLHs/1/