Jquery:将一个可拖动的div从后续父级拖放到另一个div

Question

如何将一个可拖动的div拖放或连接到另一个特别位于后续父级的div？代码如下所示，但不幸的是它不起作用。当我将项目拖动到其指定位置时，它将恢复到其原始位置。请帮忙，谢谢。

HTML

<table align="center">
<tr>
    <td>
        <h1>List of Items</h1>
    </td>
</tr>
<tr>
    <td>
        <div>
            <table border="1">
                <tr>
                    <td id="wrapper" >
                        <div class="item" style="border:1px solid black;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
    <td>
        <div>
            <table>
                <tr>
                    <td>
                        <div id="wrapper2" style="width: 100px; height: 100px; border:1px solid black;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

Javasript

$('.item').draggable({
    cursor: 'pointer',
    snap: '#wrapper',
    containment: document.body,
    revert: 'invalid',
    scroll: false,
    appendTo: document.body
});
$('#wrapper2').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});

Answer 1

检查下面是否正常工作。您应该添加用于拖放的JQuery UI
并为要拖动的div指定一些宽度和高度。因此，它将正确显示。

$('.item').draggable({
    cursor: 'pointer',
    snap: '#wrapper',
    containment: document.body,
    revert: 'invalid',
    scroll: false,
    appendTo: document.body
});
$('#wrapper2').droppable({
    accept: '.item',
    drop: function(e, ui) {
        $(this).append(ui.draggable.css('position','static'));
    }
});

.item{
  width:50px;
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table align="center">
<tr>
    <td>
        <h1>List of Items</h1>
    </td>
</tr>
<tr>
    <td>
        <div>
            <table border="1">
                <tr>
                    <td id="wrapper" >
                        <div class="item" style="border:1px solid black;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
    <td>
        <div>
            <table>
                <tr>
                    <td>
                        <div id="wrapper2" style="width: 100px; height: 100px; border:1px solid black;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>

Fiddle

希望能有所帮助。