在查詢的父div之外拖動元素

Question

我一直在四處尋找解決此問題的方法，但尚未找到解決方案。我在一個可拖動元素的可滾動區域中有一個列表。我試圖設置它，以便我可以將該父級div之外的元素拖放到可投放區域，但是當我嘗試拖動它時，似乎只能在父級div內移動。

.inputs{ 
       overflow-y: scroll; 
       overflow-x:visible; 
       height: 100px; 
       float:left; 
      } 
      ul{ 
       width:50px; 
       float:left; 
      } 
.spaces{ 
       float:right; 
       border: 0px; 
       width: 500px; 
      } 

.spaces td { 
       background-color:#666666; 
       margin:2px; 
       width:184px; 
       height: 99px; 
       border:0px; 
      } 

這是可拖動和投擲的物品

$(".inputs li").draggable({ 
                 opacity: .4, 
                 create: function(){$(this).data('position',$(this).position())}, 
                 cursorAt:{left:15}, 
                 cursor:'move', 
                 revert:function(event, ui) { 
                 $(this).data("draggable").originalPosition = { 
                 top: 0, 
                 left: 0 
                 }; 
                 return !event; 
                 }, 
                 start:function(){ 
                  $('.info').css('visibility', 'hidden'); 

                 } 
                 }); 

           $('.spaces').find('td').droppable({ 
                   drop:function(event, ui){ 
                   snapToMiddle(ui.draggable,$(this)); 
                   $(this).droppable('option', 'accept', ui.draggable); 
                   $(this).css('background-color', 'red'); 
                   }, 
                   out: function(event, ui){ 
                   $(this).droppable('option', 'accept', '.inputs li'); 
                   $(this).css('background-color', '#666'); 
                   } 
                   }); 

           }); 

<div class="inputs"> 
      <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
      <li>5</li> 
      <li>6</li> 
      <li>7</li> 
      <li>8</li> 
      <li>9</li> 
      </ul>     
      </div> 
      <br/> 
      <table class="spaces"> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td class = "hidden"></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td class = "hidden"></td> 
       </tr> 
       <tr> 
        <td class = "hidden"></td> 
        <td class = "hidden"></td> 
        <td></td> 
        <td class = "hidden"></td> 
        <td class = "hidden"></td> 
       </tr> 
      </table> 

Answer 1

使用創建一個可拖動時containment參數的代碼。喜歡的東西：

$(".inputs li").draggable({ 
containment: "document" 
.... 
}); 

對於更詳細的文檔： http://api.jqueryui.com/draggable/#option-containment