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?
source to share
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?
source to share
$(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();
});
source to share