如何使用jquery将一个td元素拖放到表中的另一个td元件中

how to drag an td element and drop it in another td element in a table using jquery

本文关键字：td 何使用 另一个 拖放 元素 一个 jquery      更新时间：2023-09-26

我正在制作一个UI，在其中我有一些静态的"td"元素，在表中我有一些"td"元件。现在我想拖动静态的"td"元素并将其删除，然后替换其中现有的"td"元素。我想知道哪个"td"被替换，哪个"td’被替换，这样我就可以通过"PHP"更新我的数据库。

这是我一直用来拖放但没有用的代码：

$("#fool td").draggable({
            revert: "invalid"
            // start: function(ev, ui){ ui.helper.width($(this).width()); }
        });
        $('#cool').droppable({
            accept : "#fool td",
            tolerance: 'pointer',
            greedy : true,
            hoverClass: 'highlight',
            drop: function(ev, ui) {
                alert('hi');
            //$(this).innerHTML($(ui.draggable));
                $(ui.droppable).replaceWith("<div>Some content</div>");
            }
        });

我的静态"td"的HTML代码是：

<div id="fool"><table id="draggable"><tr><td style="background-color:blue">english</td></tr><tr><td style="background-color:yellow">hindi</td></tr><tr><td style="background-color:green">maths</td></tr><tr><td style="background-color:white">physics</td></tr></table></div>
<div id="cool"><table>---- all td elemenet ------</table></div>

在"酷"div中，我生成了一个动态表，之后我想在那个酷表上拖放。

因为我认为你需要交换两个TD，所以

您可以使用Zepto插件，因为它提供了您所有的交换信息。参考：http://james2doyle.github.io/zepto-dragswap/

试试这个：

1. Include jQuery library and TableDnD.js
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery.tablednd.0.7.min.js"></script>
2. Call the plugin
    <script type="text/javascript">
    $(document).ready(function() {

    // Initialise the first table (as before)
    $("#table-1").tableDnD();


    });
    </script>
3. Markup
    <table id="table-1" cellspacing="0" cellpadding="2">
        <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
        <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
        <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
        <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
        <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
    </table>

有关信息，请单击此处。。。。

相关文章：