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位丢掉这个。然后我需要在删除后获取相应的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');
        }

    }
});

});

工作DEMO

Answer 2

您只需要放弃TABLE＃shoppingCart2而不是td 使用＆＃34; #chopingCart2 td＆＃34;代替！

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

                }
            });


        });

JQuery拖放不在td中工作

2 个答案: