jquery ui draggable閉じ込め内でdivを上下にドラッグ

Question

最近Javascriptを学習しています。練習として、私はドミノボードを作りたがっていました。私はボードの周りにタイルをドラッグしようとしています。私が取ったアプローチは、ボード内にタイルを作成し、それをdraggableとjquery uiに設定することです。 しかし、どういうわけか、ドラッグは上下の動きだけに限定されています。何故ですか？？

HTML：

<div id="board"> 
     <div id="tile_1-0" > 
     <div class="dominoe"> </div> 
     </div> 
    </div> 

CSS：

.dominoe { 
/* Dominoe shape */ 
    position: relative; 
    height:60px; 
    width:30px; 
    background-color:white; 
    border: 2px solid black; 

/* Rounded Corners */ 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    padding:2px;  
} 

#board { 
     margin: auto; 
     width: 200px; 
     height: 200px; 
     background-color: #0A9D2D; 
} 

のjavascript：

$("#tile_1-0").draggable({containment:'#board'}); 

組み込みをご覧くださいフィドル： https://jsfiddle.net/totoorozco/t5nnd95j/

Answer 1

divは「ボード」の全幅を占めるので、その表示を設定することにより、ブロックをインライン化するDIVことを修正：

#tile_1-0 { 
    display: inline-block; 
} 

jsFiddle example

Answer 2

は、あなたのCSSに以下を追加：

#tile_1-0{ 
    position: absolute; 
}