0

如果用户按下 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/

4

1 回答 1

1

将此单击功能添加到您的重置按钮... 单击此处获取小提琴

    $(function(){
        $('#resetButtonId').click(function(){

         $( "ol li" ).empty();   
        }); 

    });
于 2013-11-08T09:04:12.687 回答