Question

我必須在底部部分中有兩個div部分TOP和BOTTOM我有3個帶有複選框和按鈕的列表記錄。

我的要求是，當我點擊按鈕添加點擊記錄頂部DIV部分

請別人幫我謝謝！

http://jsfiddle.net/u74Ag/79/

HTML代碼

<div style="border:1px solid #eee;"> 
<ol style='list-style:decimal;border-bottom:1px solid #e7e7e7;' id="sortable"> 

</ol> <br/> 
</div> 
<br/> 


<div> 
     <ul id="draggable"> 
      <li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;"> 
       <div class="qitem" style='margin-bottom : 20px;'> 
        <label> 
         <input class="hello" type="checkbox"/>Value 1 
        </label> 
        <button class="hello" style="float:right;">Add To Top Section</button> 
       </div> 
      </li> 
      <li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;"> 
       <div class="qitem" style='margin-bottom : 20px;'> 
        <label> 
         <input class="hello" type="checkbox"/>Value 2 
        </label> 
        <button class="hello" style="float:right;">Add To Top Section</button> 
       </div> 
      </li> 
      <li style="height:auto;padding:5px 0;line-height:normal;border-bottom:1px solid #e7e7e7;list-style:none;"> 
       <div class="qitem" style='margin-bottom : 20px;'> 
        <label> 
         <input class="hello" type="checkbox"/>Value 2 
        </label> 
        <button class="hello" style="float:right;">Add To Top Section</button> 
       </div> 
      </li> 
     </ul> 
    </div> 

jQuery代碼

$(document).ready(function() 
     { 
     $("#sortable").sortable({ 
       revert: true, 
       refreshPositions: true , 
       helper : 'clone', 
       tolerance: 'pointer', 
       revert: 20 
     }); 

     $("#sortable").disableSelection(); 

     $(".qitem").draggable({ 
      tolerance:"pointer", 
      helper : 'clone', 
      refreshPositions: true , 
      revert : 'invalid', 
      opacity:.4, 
     }); 

     $("#sortable").droppable({ 
      revert:true, 
      hoverClass : 'ui-state-highlight', 
      greedy: true, 
      refreshPositions: true, 
      drop : function(ev, ui) 
      { 
       $(ui.draggable).clone().appendTo(this); 
       if($(this)[0].id === "sortable") 
       { 
        console.log($(this).closest("button").find('.hello')); 
        $(this).find('.hello').hide(); 
        $(this).find('.AH_section').show(); 
        ui.draggable.draggable('disable').closest('li').prependTo(ui.draggable.closest('ul')); 
        return true; 
       } 
      } 
     }); 
    }); 

Answer 1

這應該做的伎倆：

$("button").click(function() { 
    $("#sortable").append("<li>item</li>"); 
}); 

https://jsfiddle.net/oa2hfLum/