Question

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

这是我的代码：

HTML CODE

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

          <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

试试这样..

jquery文件

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

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

1 个答案: