将图像拖放到另一个 DIV 后，与拖动的 DIV 保持图像相同

Question

>我有 2 个 Div 标签。 一个用于拖放，另一个用于拖放。当我将图像从一个div 拖放到另一个从拖动div 中删除的div 图像时。我需要在将图像拖放到第二个div 后在拖动 Div 中保持图像相同。

这是我的代码：

网页代码

   <div id="drag" style="float: left; margin: 10px;">
    <span style='font-family: Trebuchet MS; font-size: 14px; color: Red; font-weight: bolder;'>
        Drag Images</span>
    <img src="images/map1.jpg" alt="circle1" width="45" height="45" class="drg " />
    <img src="images/map2.jpg" alt="circle2" width="45" height="45" class="drg " />
    <img src="images/map3.jpg" alt="triangle3" width="65" height="55" class="drg " />
</div>
  <div id="drop" style="float: left;">
</div>

JS代码

          <script type="text/javascript">
    $(document).ready(function () {
        // sets the draggable and define its options
        $('#drag .drg').draggable({
            drag: function () {
                $(this).css({ opacity: 0.5, containment: "#drop" });
                $('#drag .drg')
                // revert: 'invalid', helper: 'clone', snap: "#drop_here td", opacity: 0.7
            }
        });
        // define options for droppable
        $('#drop').droppable({
            //accept: 'img.drg',      // accept only images with class 'drg'
            activeClass: 'drp',           // add class "drp" while an accepted item is dragged
            drop: function (event, ui) {
                ui.draggable.show();
                var drq = ui.draggable[0].className;
                //test2
                if (drq == "drg  ui-draggable ui-draggable-dragging") {
                    // alert(drq);
                    var img = ui.draggable[0];
                    //remove text
                    $(this).html("");
                    //set size of the image to fit the box and put it into the topleft corner
                    $(img).css({ opacity: 1, width: "400px", height: "400px", top: "0px", left: "0px" });
                    $(this).append(img);
                }
                //test2
            }
        });
        // 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);
        });
    });

Answer 1

像这样尝试。

j查询文件

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
    $(function () {
         $("#drag div").draggable({
             appendTo: "body",
             helper: "clone"
         });
         $(".placeholder").droppable({
             activeClass: "ui-state-default",
             hoverClass: "ui-state-hover",
             accept: ":not(.ui-sortable-helper)",
             drop: function (event, ui) {
                 $("<span></span>").text(ui.draggable.img()).appendTo(this);
             } 
         });
     });
      </script>

而 html 是

<div id="drag">
        <div><img src="123.jpg" alt="circle1" width="45" height="45" class="drg " /></div>
        <div><img src="321.jpg" alt="circle1" width="45" height="45" class="drg " /></div>
        <div><img src="123.jpg" alt="circle1" width="45" height="45" class="drg " /></div>
        <div><img src="321.jpg" alt="circle1" width="45" height="45" class="drg " /></div>
    </div>
    <div id="schedule">
       <table border = "1">
        <tr><td class="placeholder"></td><td class="placeholder"></td></tr>
        <tr><td class="placeholder"></td><td class="placeholder"></td></tr>
       </table>
    </div>