![](/img/trans.png)
[英]jQuery UI Draggable set drag length without containment property
[英]jquery ui draggable restricting div to up and down drag within containment
我最近一直在學習Javascript。 作為練習,我想創建一個Domino板。 我正在嘗試在板上拖一個磁貼。 我采用的方法是在板上創建一個磁貼,並使用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/
因為它所在的div占用了“木板”的整個寬度。 通過將該div的顯示設置為inline-block來解決此問題:
#tile_1-0 {
display: inline-block;
}
將此添加到您的CSS:
#tile_1-0{
position: absolute;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.