jquery Возврат изображения после капли

Question

После того, как пользователь поместил URL-адрес изображения в поле, значение тега img изменится, и пользователь может перетащить изображение в часть #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 draggable и droppable.

Сначала вы должны объявить держатель для изображения (тот, что изменения, когда пользователь введите адрес изображения из поля ввода) и выполните следующие действия:

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. 
     } 
}); 

Так, в принципе, с этим вы можете перетащить & DROP одно изображение раз вы хотите, сохраняя оригинальное изображение.

Если пользователь изменит URL-адрес изображения, содержимое с #image_draggable владельца изменится и будет готово к перетаскиванию &.

Надеюсь, что эта помощь.