0

ユーザーが画像のURLをフィールドに入力すると、imgタグの値が変更され、ユーザーは画像をボックスの#centerhead部分にドラッグアンドドロップできます。今私が抱えている問題は、imgがドロップされた後、それが消えて、別の画像のURLを取得する準備ができている元の場所に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>
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.
        }
});

したがって、基本的に、これを使用すると、元の画像を保持したい回数だけ1つの画像をドラッグアンドドロップできます。

ユーザーが画像のURLを変更すると、＃image_draggableホルダーのコンテンツが変更され、ドラッグアンドドロップできるようになります。

この助けを願っています。

于 2012-08-13T22:45:44.037 に答える