Question

我有2個Div標籤。一個用於拖動，另一個用於拖放。當我從一個div中刪除圖像到另一個div圖像從拖動div中刪除。我需要保持圖像在拖放Div後放到第二個div。

這裏是我的代碼：

HTML代碼

<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

嘗試這樣的..

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>