如何在拖放中重置购物车值

Question

如果用户按下下面的重置按钮，我想重置值 jsfiddle 请帮助我

如果用户拖放值，然后按重置，那么它再次显示空白框并重置所有值，请帮助我解决此问题

.HTML

练习1：

<div id="products">
  <div class="ui-widget-content">

    <li data-id="1" class = "bank" id="seven" >
      <a href="#" style="color:#FFFFFF;" class="button button-green">
        my
      </a>
    </li>
    <li data-id="3" class="bank" id="third">
      <a href="#" style="color:#FFFFFF;" class="button button-orange">
        new 
      </a>
    </li>

    <table width="100%">
      <tr>
        <td>
          <table width="100%" border=1>
            <tr>
              <td  width : '33%'>
                <div id="shoppingCart1" class="shoppingCart">
                  <div align="center" class="ui-widget-content">
                    <ol id="amt1" style="list-style:none">
                      <li class="placeholder">
                        &nbsp;
                      </li>
                    </ol>
                  </div>
                </div>
              </td>
              <td>
                <div id="shoppingCart2" class="shoppingCart">
                  <div align="center" class="ui-widget-content">
                    <ol id="amt2" style="list-style:none">
                      <li class="placeholder">
                        &nbsp;
                      </li>
                    </ol>
                  </div>
                </div>
              </td>
            </tr>
          </table>
          <br/>
          <br/>

          <input type="button" value="reset" class="reset"/>
          <br/>
          <br/>
          <br/>

Jquery

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ".bank",
    drop: function (event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();

        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        });
        var cartid = self.closest('.shoppingCart').attr('value');
        $(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
        self.html(listItem);


    }
});
$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ".bank",
    drop: function (event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid

        });

        //To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('value');
        $(".shoppingCart:not(#" + cartid + ") [data-id=" + productid + "]").remove();
        self.html(listItem);
    }
});

小提琴 http://jsfiddle.net/hirenwebdp/Ky8fP/8/

Answer 1

将此单击功能添加到重置按钮...点击这里看小提琴

    $(function(){
        $('#resetButtonId').click(function(){
         $( "ol li" ).empty();   
        }); 
    });