イメージを削除する際にフォームの値を更新するにはどうすればよいですか？

Question

イメージドロップ時にフォーム値を更新しているドラッグウェブアプリケーション&を作成したいと思います。

私は、私のMySQLデータベースにpro_name、image、priceというテーブルを持っています。ここに私のコードは次のとおりです。

<div id = "products"> 
    <table> 
    <tr> 
     <td>Object</td> 
     <td>Name</td> 
     <td>Price</td> 
    </tr> 
    <?php 
    $get_prod = "select * from objecttbl where type = 'product'"; 
    $run_prod = mysqli_query($con,$get_prod); 
    while($row_pro = mysqli_fetch_array($run_prod)){ 
     $objID = $row_pro['objID']; 
     $name = $row_pro['name']; 
     $price = $row_pro['price']; 
     $image = $row_pro['photo']; 
     echo "<tr><td><div class = 'draggable'><img src = 'objects/$image'></div></td> 
     <td><h4>$name</h4></td><td>$price</td></tr>"; 

    } 
    ?> 
    </table> 
</div> 

<div id = "dropzone"></div> 
<form> 
    <input type ="text" name = "price" placeholder = "price" value = "0"/> 
</form> 

私はドラッグ可能div内の画像が含まれていました。私がしたいのは、画像をdropzoneにドラッグすると、その価格がフォームに追加されます。

Answer 1

非常に完全な例は含まれていないので、私はいくつかの自由を取らなければならず、あなた自身のコードにそれらを適応させなければならないかもしれません。

実施例：

<div id="products"> 
    <table width="240px"> 
    <thead> 
     <tr> 
     <th>Object</th> 
     <th>Name</th> 
     <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <div class='draggable'><img src="https://placehold.it/100/FF0000/FFFFFF?text=Item+1"></div> 
     </td> 
     <td> 
      <h4>Item 1</h4> 
     </td> 
     <td>$1.00</td> 
     </tr> 
     <tr> 
     <td> 
      <div class='draggable'><img src="https://placehold.it/100/00FF00/FFFFFF?text=Item+2"></div> 
     </td> 
     <td> 
      <h4>Item 2</h4></td> 
     <td>$2.99</td> 
     </tr> 
     <tr> 
     <td> 
      <div class='draggable'> 
      <img src="https://placehold.it/100/0000FF/FFFFFF?text=Item+3"> 
      </div> 
     </td> 
     <td> 
      <h4>Item 3</h4></td> 
     <td>$3.50</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

<div id="dropzone" class="addItem"></div> 
<form> 
    <label for="price">Price: </label> 
    <input type="text" name="price" id="price" placeholder="price" value="$0.00" /> 
    <label for="qnty">Quantity</label> 
    <input type="text" name="qnty" id="qnty" value="0"> 
</form> 

https://jsfiddle.net/Twisty/njt3x3su/

HTMLは、上記のHTMLは、あなたのPHPからの出力を表すことができます。サンプル出力は含まれていないので、これは私が作成したものです。

CSS

#dropzone { 
    border: 2px dotted #202020; 
    width: 98px; 
    height: 98px; 
    margin: 3px; 
} 

.addItem { 
    background-color: #CFCFCF; 
    background-image: url("https://placehold.it/200/CFCFCF/000000?text=Add+Item"); 
    background-repeat: no-repeat; 
    background-position: -50px -50px; 
} 

あなたの例では、任意のスタイリングが含まれていませんでしたので、ユーザーはどこにアイテムをドラッグして知ることができるかどうかはわかりません。私はいくつかを追加しました。私はビジュアルフィードバックを作成しようと少し追加しましたが、実際にこの質問の範囲には入っていないので、私はあきらめました。

jQueryの

$(function() { 
    var customerItems = []; 
    $(".draggable").draggable({ 
    opacity: 0.75, 
    revert: true, 
    helper: function() { 
     var me = $(this); 
     var par = me.parent(); 
     var item = $("<div>", { 
      src: $(this).attr("src"), 
      class: "dragItem" 
     }) 
     .css({ 
      width: "100px", 
      height: "100px", 
      background: "url('" + me.find("img").attr("src") + "') no-repeat" 
     }) 
     .data({ 
      name: $.trim(par.next().text()), 
      price: parseFloat($.trim(par.next().next().text()).substring(1)) 
     }); 
     return item; 
    } 
    }); 
    $("#dropzone").droppable({ 
    //accept: ".dragItem", 
    classes: { 
     "ui-droppable-hover": "acceptItem", 
     "ui-droppable-active": "ui-state-default" 
    }, 
    drop: function(e, ui) { 
     console.log(ui.helper.data()); 
     customerItems.push(ui.helper.data()); 
     var sum = 0, 
     qnty = customerItems.length; 
     $.each(customerItems, function(key, item) { 
     sum += item.price; 
     }); 
     $("#price").val("$" + sum); 
     $("#qnty").val(qnty); 
    } 
    }); 
}); 

あなたは、任意のコード例が含まれていなかったので、私はあなたがしようとしたのか分かりません。基本的に、ドロップはドラッグされたアイテムから詳細を取得します。これらの拘束があると、.val()メソッドを使用して入力フィールドに追加することができます。

したがって、項目を#dropzoneにドロップすると、フィールドの値が$("#price").val("$" + sum);に設定されます。

どのようにして価格を取得できますか？ ui.draggableまたはui.helperオブジェクトから取得するのが最も簡単です。ドラッグ可能なアイテムにオブジェクトの詳細を格納する方法はたくさんあります。 data属性を使用することをおすすめします。

HTMLには、特にdata属性の詳細は含まれていませんが、テーブル内には、ドラッグ可能なアイテムが選択されて移動されたときにこれらの詳細情報が収集されていなければなりません。以下のようなデータを提示する可能性のより良い方法は、次のようになります。あなたは、ユーザーが1以上、またはそれぞれの一つだけをつかむしたい場合は、それは明らかではありませんので

<div class='draggable' data-name="Item 1" data-price="1.00"> 
    <img src="https://placehold.it/100/FF0000/FFFFFF?text=Item+1"> 
</div> 

、私が表現するhelperオブジェクトを作ることにしました選択。関数を使用して、私たちのニーズに適合し、後で必要とされるすべてのデータを含むヘルパーオブジェクトを作成することができます。ソースから、さまざまな表のセルから画像、名前、価格を収集できます。

希望に役立ちます。投稿を編集して詳細を追加してください。あなたは質問があればコメントしてください。