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持有者的内容将发生更改，并准备拖放&。

希望得到这个帮助。