Building a chess game with jQuery UI. I used Draggable, but I need to make them not stack
I made this chess game, but I need help setting up accept in jQuery UI Droppable.
Here is a fiddle: http://jsfiddle.net/kevinsimper/ZzHjz/3/
I tried to do this, when you dropped something, it will update all td but they don't work.
Can you help me?
Perhaps the question should have been formulated:
After dragging the element, the newly freed td will not become a valid, droppable, target for future drags.
The problem was this: You were only creating objects with a resettable source set td: empty. So any non-empty td didn't even have a droppable object created to manipulate.
Solution: Create dropable objects on all td's. Then turn off droppability on all non-empty td's. Note that you do not need to include droppability on all td: empty every time. You only need to enable it on the recently released TD. (You must also disable droppability for the newly occupied td.)
http://jsfiddle.net/pabo/7M3WJ/
$('a').draggable({ containment: "table", revert: 'invalid' });
$('td').droppable({
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
$(droppedOn).droppable("disable");
$(dropped).parent().droppable("enable");
$(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn);
}
});
$('td').not('td:empty').droppable("disable");
... by the way, shouldn't the chessboard be 8x8 and not 10x10?
$(document).ready(function(){
var cls='';
var x=1;
for(i=1;i<=64;i++){
if(x && i%2!=0 ||!x&&i%2==0)
{
cls = "white";
}
else
{
cls="grey";
}
var content="<div class='"+cls+"'></div>";
//alert(i/8)
if(i/8>1&&i/8<=2||i/8>6&&i/8<=7){
content="<div class='"+cls+"'><a>♙</a></div>";
}
if(i/8==0.125||i/8==1||i/8==7.125||i/8==8){
content="<div class='"+cls+"'><a>♖</a></div>";
}
if(i/8==0.25||i/8==0.875||i/8==7.25||i/8==7.875){
content="<div class='"+cls+"'><a>♘</a></div>";
}
if(i/8==0.375||i/8==0.75||i/8==7.375||i/8==7.75){
content="<div class='"+cls+"'><a>♗</a></div>";
}
if(i/8==0.5&&i/8<=2||i/8==7.5&&i/8<=8){
content="<div class='"+cls+"'><a>♕</a></div>";
}
if(i/8==0.625&&i/8<=2||i/8==7.625&&i/8<=8){
content="<div class='"+cls+"'><a>♔</a></div>";
}
$("#board").append(content);
//$("#board").append("<div class='"+k+"'></div>");
if(i%8==0)
x=!x;
}
$('a').draggable();
$('div').droppable({
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0, left: 0}).appendTo(droppedOn);
}
});
$(' div').not(' div:empty').droppable();
});