0

用户在字段中放置图像 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>
4

1 回答 1

2

好吧，假设您正在使用 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 持有者的内容将更改并准备好拖放。

希望这有帮助。

于 2012-08-13T22:45:44.037 回答