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提供一些宽度和高度。所以，它会正确显示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle

希望它有所帮助。

Jquery：将一个可拖动的div放到后续父母的另一个div中

1 个答案: