如何在刪除圖像時更新表單的值？

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

既然你沒有包括一個非常完整的例子，我不得不採取一些自由，你可能不得不適應他們自己的代碼。

工作實施例：https://jsfiddle.net/Twisty/njt3x3su/

HTML

<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> 

上述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屬性中的詳細信息，但在表中，選擇並移動可拖動對象時必須收集這些詳細信息。一個潛在的更好的方式來呈現數據是這樣的：

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

，因爲如果你希望用戶搶到1個或更多，或只有每一個現在還不清楚，我決定做一個helper對象來表示選擇。使用一個函數，我們可以創建一個適合我們需求的幫助對象，並且將包含以後需要的所有數據。從源頭上，我們可以從各個表格單元收集圖像，名稱和價格。

希望有所幫助。編輯您的帖子並添加更多詳細信息。評論你是否有問題。