jquery - JQueryのドラッグアンドドロップがtdで機能しない

Question

これは私が使用したスクリプトです

$(function () {

     $("#header").draggable({
   helper: "clone",
    cursor: 'move',
    tolerance: 'fit',
     containment: '#shoppingCart2'
});

    $("#shoppingCart2").droppable({

        drop: function (e, ui) {

            if ($(ui.draggable)[0].id != "") {
                x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                containment: '#shoppingCart2 ',
                tolerance: 'fit'
            });

            x.appendTo('#container');
        }

        }
    });


 });

以下はhtmlコードです

            <div id="header" style="width:180px;"><span style="background-color:#FFFFFF">img</span></div><br />
        <br />

        <div id="container">



        <table width="200" id="shoppingCart2" border="1">
        <tr>
        <td>test1</td>
        <td id="t1" class="time"> td1&nbsp;</td>
        <td id="t2" class="time">td2&nbsp;</td>
        </tr>
        <tr>
        <td>test2</td>
        <td class="time">&nbsp;</td>
        <td class="time">&nbsp;</td>
        </tr>
        <tr>
        <td>test3</td>
        <td class="time">&nbsp;</td>
        <td class="time">&nbsp;</td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        </table>
        </div>

私が使用したスクリプトは次のとおりです。

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js

「img」をドラッグすると、各行の最初の td にドロップされます。これを各行の 2 番目と 3 番目の tds にドロップできませんでした。次に、ドロップ後に対応する td id を取得する必要があります。私を助けてください。

Answer 1

これに従ってスクリプトを変更してください....

$(function () {

$("#header").draggable({
    helper: "clone",
    cursor: 'move',
    tolerance: 'fit',
    containment: '#container'//use #container instead  of #shoppingCart2
});

$("#shoppingCart2 td").droppable({//use  #shoppingCart2 instead of #shoppingCart2 td

    drop: function (e, ui) {

        if ($(ui.draggable)[0].id != "") {
            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                containment: '#container',//use #container instead  of #shoppingCart2
                tolerance: 'fit'
            });

            x.appendTo('#container');
        }

    }
});

});

ワーキングデモ

Answer 2

td ではなく、TABLE #shoppingCart2 にドロップできるようにするだけです。代わりに「#shoppingCart2 td」を使用してください。

$(function () {

            $("#header").draggable({
                helper: "clone",
                cursor: 'move',
                tolerance: 'fit',
            });

            $("#shoppingCart2 td").droppable({

                drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();
                        x.draggable({
                            helper: 'original',
                            tolerance: 'fit'
                        });

                        x.appendTo('#container');
                    }

                }
            });


        });