jquery恢復丟棄後的圖像

Question

在用戶在圖像url中放置圖像url後，img標籤的值發生了變化，用戶可以將圖像拖放到box的#centerhead部分。現在我遇到的問題是在img被丟棄後它消失了，我想讓img標籤返回到原始位置，準備拍攝另一個圖像url。

function addToPart() { 
    var URLText = document.getElementById("txtURLText"); 
    var bpart = document.getElementById("BodySelect"); 
    if (URLText.value != "") { 
     var UT = URLText.value; 

     var bpartValue; 
     switch (bpart.value) { 
      case "1": 
       bpartValue = "#centerhead"; 
       break; 
      case "2": 
       bpartValue = "#centerbody"; 
       break; 
      case "3": 
       bpartValue = "#RightArm"; 
       break; 
      case "4": 
       bpartValue = "#leftArm"; 
       break; 
      case "5": 
       bpartValue = "#legs"; 
       break; 
      case "6": 
       bpartValue = "#feet"; 
       break;   
     } 
     //the function that appends the values to the table 
     addToArea(bpartValue,UT); 
    } 

}; 
//this adds the picture to the table when the part had been choosen 
function addToArea(bvalue,UT) { 
$(bvalue).find('tbody') 
.append($('<tr>') 
    .append($('<td>') 
     .append($('<img>') 
      .attr('src', UT) 
       .attr('id',UT) 

     ) 
    ) 
); 



}; 



//this takes the picture URL and put the pic in the test image 
function showPic() { 
    var URLText = document.getElementById("txtURLText").value; 
    document.getElementById("testImage").src=URLText; 
    //this makes test image draggable 
    $(function() { 
     $("#testImage").draggable(); 
    }); 

    //TODO once the image is dropped it simply disapears. Need to clone it back to it's orignal spot. 
    $(function() { 
     $("#centerhead").droppable({ 
      drop: function (event, ui) { 
       $("#centerhead").append(ui.draggable); 
       addToArea("#centerhead", URLText); 
       // $("#testImage").clone().appendTo('#dragging'); 
       $("#dragging").append($('<img>') 
      .attr('src', '') 
       .attr('id', 'testImage') 
       ) 
       $("#txtURLText").attr('value', ''); 
      } 
     }); 

    }); 


}; 




<div id="test1D"> 
    <table id="wholeBody"> 
    <thead></thead> 
    <tbody> 
    <tr><td></td><td><table id="centerhead"><thead><tr><th>Head</th></tr></thead><tbody></tbody></table></td><td></td></tr> 

    <tr><td><table id="RightArm"><thead><tr><th>Right Arm</th></tr></thead><tbody></tbody></table></td><td><table id="centerbody"><thead><tr><th>Body</th></tr></thead><tbody></tbody></table></td><td><table id="leftArm"><thead><tr><th>LeftArm</th></tr></thead><tbody></tbody></table></td></tr> 

    <tr><td></td><td><table id="legs"><thead><tr><th>Legs</th></tr></thead><tbody></tbody></table></td><td></td></tr> 

    <tr><td></td><td><table id="feet"><thead><tr><th>Feet</th></tr></thead><tbody></tbody></table></td><td></td></tr> 

    </tbody> 

    </table> 
    <div id="dragging"> 
    <img alt="Place image here" src="" id="testImage"/> 
    </div> 
    <input id="txtURLText" type="text" onchange="showPic()" /> 
    <select id="BodySelect" onchange="addToPart()"> 
     <option></option> 
     <option value="1">head</option> 
      <option value="2">body</option> 
      <option value="3">RightArm</option> 
      <option value="4">LeftArm</option> 
      <option value="5">legs</option> 
      <option value="6">feet</option> 
     </select> 

    <p> 
     <input type="submit" value="Create" /> 
    </p> 
</div> 

Answer 1

那麼，讓我們假設您使用的是jQuery可拖動和可拖放函數。

首先需要聲明的圖像（當用戶輸入從輸入框中輸入圖片URL是改變一個）的支架，並做到以下幾點：

var $holder_image = $("div#image_draggable"), 

$holder_image.draggable({ 
    revert: "invalid", 
    helper: "clone", 
    cursor: "move" 
}); 

正如你所看到的，一旦申報image_draggable容器聲明助手克隆很重要，這意味着可以拖動此容器多次丟棄&。

後，必須具有以下聲明受體的（其中的圖像可以被丟棄的區域）：

$areas_to_drop = $(".image_holders"); // this selector select all possible containers where the image can be dropped 
$areas_to_drop.droppable({ 
     accept: "#image_draggable", 
     drop: function(event, ui) { 
      // Here you add the necessary functionality once the image is dropped. It's an event. Not required in case there's nothing to do. 
     } 
}); 

所以，基本上，這個你可以拖動&下降一個形象，你要保持與時俱進原始圖像。

如果用戶更改圖片url，則來自#image_draggable持有者的內容將發生更改，並準備拖放&。

希望得到這個幫助。