拖放功能无法正常工作

Question

我正在制作一个小工具，用于在桌子中拖放一些图像，事实是每个工作都正常，直到我将图像放入表格内，图像被放置在与选择的图像不同的位置

$(function () {
    $('td.soccer-field').click(function () {
        if ($('#dice1').text() != '' && $('#dice2').text() != '') {
            if ($('td[data-path="begin-path"]').length == 0) {
                $(this).attr('data-path', 'begin-path');
                $(this).off('mouseenter mouseleave');
                $(this).addClass('selected-path');
            } else if ($('td[data-path="begin-path"]').length && $(this).attr('data-path') != 'begin-path' && $('td[data-path="end-path"]').length == 0) {
                $(this).attr('data-path', 'end-path');
                $(this).addClass('actual-path');
                $('.selected-path').addClass('actual-path');
                $('.actual-path').removeClass('selected-path');
            } else if ($(this).attr('data-path') == 'end-path') {
                $(this).removeAttr('data-path');
                $('.actual-path').addClass('selected-path');
                $('.selected-path').removeClass('actual-path');
            }
            ;
        }
    });


    $('td.soccer-field').hover(function () {
        if ($('#dice1').text() != '' && $('#dice2').text() != '') {
            if ($('td[data-path="begin-path"]').length == 0) {
                $(this).attr('data-path', 'select-begin-path');
            } else if ($(this).attr('data-path') != 'begin-path') {
                var presentCell = $(this).attr('id') + $(this).parent().attr('id');
                var cell;
                if ($(this).attr('data-path') == 'ending') {
                    $('.selected-path').each(function () {
                        cell = $(this).attr('id') + $(this).parent().attr('id');
                        distance = new Board().calculateDistanceSquares(presentCell, cell);
                        if (distance == 1) {
                            $('[data-path="ending"]').removeClass('selected-path');
                            $('[data-path="ending"]').removeAttr('data-path');
                            if ($(this).attr('data-path') != 'begin-path')
                            {
                                $(this).attr('data-path', 'ending');
                            }
                            return;
                        }
                    });
                } else if ($('td[data-path="end-path"]').length == 0) {
                    var actualCell = $(this);
                    var dicesResult = parseInt($('#dice1').text()) + parseInt($('#dice2').text());
                    $('.selected-path').each(function () {
                        cell = $(this).attr('id') + $(this).parent().attr('id');
                        distance = new Board().calculateDistanceSquares(presentCell, cell);
                        if (distance == 1 && $('.selected-path').length <= (dicesResult - 1)) {
                            actualCell.attr('data-path', 'ending');
                            actualCell.addClass('selected-path');
                            if ($(this).attr('data-path') != 'begin-path') {
                                $(this).removeAttr('data-path');
                            }
                            ;
                            return;
                        }
                    });
                }
            }
        }
    }, function () {
        if ($(this).attr('data-path') == "select-begin-path") {
            $(this).removeAttr('data-path');
        }
    });

    $('#diceRoller').click(function () {
        $('#dice1').text(Math.floor(Math.random() * 6) + 1);
        $('#dice2').text(Math.floor(Math.random() * 6) + 1);
        $(this).attr('disabled', true);
    });

    $('.drag-container img.draggable').draggable({
        cursor: 'move',
        containment: '#left',
        revert: 'invalid',
        refreshPositions: true,
        opacity: .45,
        delay: 50
    });

    $('td.soccer-field').droppable({
        accept: 'img.draggable',
        hoverClass: 'hover-pawn',
        drop: function (event, ui) {
            $(this).append(ui.draggable);
            ui.draggable.draggable("option", "disabled", true);
        }
    });
});

//function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
function Board() {
    this.buildBoard = function (container, gamePhase, playerTurn) {
        var playerTurn = playerTurn;
        var gamePhase = gamePhase;
        var board = $('<table></table>').attr('id', 'board');
        if (gamePhase == 0) {
            var sparePiecesBlack = $('<div></div>').attr('id', 'spare-pieces-black'), img;
            sparePiecesBlack.addClass('drag-container');
            for (var i = 0; i < 5; i++) {
                img = $('<img>').attr('id', i + 1);
                img.addClass('black draggable');
                img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pdt45.svg/45px-Chess_pdt45.svg.png');
                sparePiecesBlack.append(img);
                $("#diceRoller").attr('disabled', true);
            }
            ;
            $('#' + container).append(sparePiecesBlack);
        }
        ;
        var row, cell, containerHeight, containerWidth;
        for (var i = 0; i < 10; i++) {
            row = $('<tr></tr>').attr('id', i + 1);
            for (var j = 0; j < 20; j++) {
                cell = $('<td></td>');
                if ((j == 0 || j == 19) && (i >= 3) && (i <= 6)) {
                    cell.addClass('behind-goal');
                }
                else if ((j > 0) && (j < 19)) {
                    cell.attr('id', String.fromCharCode(j + 96));
                    cell.addClass("soccer-field");
                }
                ;
                row.append(cell);
            }
            board.append(row);
        }
        $('#' + container).append(board);
        if (gamePhase == 0) {
            var sparePiecesWhite = $('<div></div>').attr('id', 'spare-pieces-white'), img;
            sparePiecesWhite.addClass('drag-container');
            for (var i = 0; i < 5; i++) {
                img = $('<img>').attr('id', i + 1);
                img.addClass('white draggable');
                img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pdt45.svg/45px-Chess_pdt45.svg.png');
                sparePiecesWhite.append(img);
            }
            ;
            $('#' + container).append(sparePiecesWhite);
        }
        ;
    };

    this.calculateHorizontalDistance = function (sq1, sq2) {
        var column1 = sq1.substring(0, 1).charCodeAt(0);
        var column2 = sq2.substring(0, 1).charCodeAt(0);
        return (Math.abs(column1 - column2));
    };

    this.calculateVerticalDistance = function (sq1, sq2) {
        var row1 = parseInt(sq1.substring(1));
        var row2 = parseInt(sq1.substring(1));
        return (Math.abs(row1 - row2));
    };

    this.calculateDistanceSquares = function (sq1, sq2) {
        return(this.calculateVerticalDistance(sq1, sq2) + this.calculateHorizontalDistance(sq1, sq2));
    }

}


var board = new Board();
board.buildBoard('left', 0, 'black');

#left table{
    border:0.2em solid black;
    border-collapse:collapse;
}

#left table tr{
    height: 2.5em;

}

#left table tr td{
    width: 3.33em;
}


td.soccer-field{
    border: 0.1em solid black;
}

td.behind-goal{
    background-color: #F8FAB4;
}

.selected-path.soccer-field, td[data-path="select-begin-path"],.hover-pawn.soccer-field{
    border: 0.15em solid #F8FAB4;
}

.actual-path.soccer-field{
    border: 0.15em solid #F72D48;
}

.drag-container img:hover {
    cursor: move;
}

.drag-container{
    display: inline-block;
}

img {
    width : 3.33em;
    height: 2.5em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="boardContainer">
    <div id="right">
        <p id="dice1"></p><p id="dice2"></p>
        <button id="diceRoller">Lanzar Dados</button>
    </div>

    <div id="left"></div>
</div>

任何帮助都将非常感激

注意：我已经尝试用div做同样的事情。它的工作原理与上面的代码片段相同