Question

用户在场中放置图像网址后，img标记的值会发生变化，用户可以将图像拖放到框的#centerhead部分。现在我遇到的问题是在img被删除之后它消失了，我想让img标签回到它的原始位置准备采取另一个图像网址。

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

所以，基本上，你可以用你想要保留原始图像的时间拖放一个图像。

如果用户更改了图片网址，则#image_draggable所有者的内容将会更改并准备好进行拖放。

希望得到这个帮助。

jquery在删除后取回图像

1 个答案: