Question

我试图通过将元素保留在原始位置来将元素拖放到容器中。

我的代码如下

  <script type="text/javascript">
    $(document).ready(function () {
        // sets the draggable
        $('#drag .drg').draggable({
            cursor: 'move',          // sets the cursor apperance
            revert: 'valid'

        });

        // sets droppable
        $('#drop').droppable({
            drop: function (event, ui) {
                // after the draggable is droped, hides it with a hide() effect
                ui.draggable.hide(1000);
            }
        });

        // when the "#sw" element (inside the "#drop") is clicked
        // show the items with class "drg", contained in "#drag"
        $('#drop #sw').click(function () {
            $('#drag .drg').slideDown(1000);
        });
    });
</script>

<body>
<div id="drop">
    Drop here &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Show</span></div>
<div id="drag">
    Drag these images:<br />
    <img src="../../Images/1.jpg" alt="circle" width="45" height="45" class="drg" />
    <img src="../../Images/2.jpg" alt="triangle" width="65" height="55" class="drg" />
    <img src="../../Images/3.jpg" alt="rhomb" width="70" height="55" class="drg" />
    <div class="drg">
        DIV with some content. Click and drag</div>
</div>

我可以拖放但我无法在其原始位置创建副本。此外，我只想拖放到指定的位置。

谢谢大家

Answer 1

您可以使用jQuery UI中的Draggable交互。

此功能可在任何DOM元素上启用可拖动功能。您可以使用鼠标单击它并将其拖动到视口中的任何位置来移动可拖动对象。

看看这里：

Draggable jQuery UI

拖放并在Jquery中恢复

1 个答案: