jquery ui draggable限制div在上下拖動遏制

Question

我一直在學習Javascript最近。作爲一個練習，我想創建一個Dominoes板。我正試圖在電路板周圍拖一塊瓷磚。我採取的方法是在板內創建一個瓦片，並用jquery ui將其設置爲draggable。 但是，不知何故拖曳僅限於上下運動。這是爲什麼？？

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的顯示，以inline-block的：

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

jsFiddle example

Answer 2

添加到您的CSS：

#tile_1-0{ 
    position: absolute; 
}