Question

我是jQuery编程的新手，我正在尝试制作国际象棋游戏。我只是想请你帮忙，当我拖动它们时如何让我的碎片移动。这是我的代码的一部分。您还可以在我的小提琴代码中看到其他部分（发布以下链接）：

<table id="chess_board" cellpadding="0" cellspacing="0">
    <tr>
        <td id="A8"><a href="#" class="rookBlack">&#9820;</a></td>
        <td id="B8"><a href="#" class="nightBlack">&#9822;</a></td>
        <td id="C8"><a href="#" class="bishopBlack">&#9821;</a></td>
        <td id="D8"><a href="#" class="kingBlack">&#9819;</a></td>
        <td id="E8"><a href="#" class="queenBlack">&#9818;</a></td>
        <td id="F8"><a href="#" class="bishopBlack">&#9821;</a></td>
        <td id="G8"><a href="#" class="nightBlack">&#9822;</a></td>
        <td id="H8"><a href="#" class="rookBlack">&#9820;</a></td>
    </tr>
    <tr>
        <td id="A7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="B7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="C7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="D7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="E7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="F7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="G7"><a href="#" class="pawnBlack">&#9823;</a></td>
        <td id="H7"><a href="#" class="pawnBlack">&#9823;</a></td>
    </tr>

请参阅我的代码：http://jsfiddle.net/JKFKC/61/embedded/result/

Answer 1

如果您只是通过在页面上引用来使用jQuery库，那么这很容易做到：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

然后在你的Javascript中只需要在你想要拖动的任何东西上调用.Draggable函数。很简单：

$("a").draggable();  // this would make any `a` tag draggable.

以下是jQuery中可拖动功能的链接：http://jqueryui.com/draggable/

另请参阅他们提供的可放置功能：http://jqueryui.com/droppable/

Answer 2

添加此脚本

$(function() {
    $( "a" ).draggable();
  });

Here you can Downlaod the Jquery Draggable Code

在这里你去 Demo

<强> Here New answer

Dude添加此代码

$('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");

使用jscript将表数据拖动到其他单元格

2 个答案: