jquery - JQuery drag and drop not working in td

Question

This is the script i used

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

        }
    });


 });

Below is the html code

            <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>

The script i used is:

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

while drag the "img", it droped in first td of each row. i couldn't dropped this in 2nd and 3rd tds of each row. Then i need to take the corresponding td id after dropped. Please help me.

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

您只允许放在 TABLE #shoppingCart2 而不是 td 上使用“#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');
                    }

                }
            });


        });