Jquery UI不能从左边拖拽到右边
Jquery UI can't drag from left to right side
在我的页面上,我使用Jquery UI extension
来排序div。div按2列排列。我创建了一个JS Bin,请看看它。
当你把所有3个div拖到左边时,你不能再把它们拖到右边。错在哪里?
$(document).ready(function() {
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
percentPosition: true
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery('bindUIDraggableEvents', $items);
});
* {
margin: 0px;
padding: 0px;
font-family: 'Francois One', sans-serif;
font-size: 16px;
text-decoration: none;
}
.grid {
width: 1000px;
background-color: aqua;
}
.gridItem {
width: 49%;
background-color: coral;
}
.gridGutter {
width: 2%;
}
@media screen and (max-width: 1000px) {
.grid {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
<div class="gridGutter"></div>
<div class="gridItem">div 1</div>
<div class="gridItem">div 2</div>
<div class="gridItem">div 3</div>
</div>
Packery文档说:
如果未设置columnWidth,则拖动的项只能放置在其他项的位置。
您可以为columnWidth
设置一个选择器,以便它将该元素的宽度作为列的宽度。
$(document).ready(function() {
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
percentPosition: true,
columnWidth: '.gridSizer'
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery('bindUIDraggableEvents', $items);
});
* {
margin: 0px;
padding: 0px;
font-family: 'Francois One', sans-serif;
font-size: 16px;
text-decoration: none;
}
.grid {
width: 1000px;
background-color: aqua;
}
.gridSizer,
.gridItem {
width: 49%;
}
.gridItem {
background-color: coral;
}
.gridGutter {
width: 2%;
}
@media screen and (max-width: 1000px) {
.grid {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
<div class="gridSizer"></div>
<div class="gridGutter"></div>
<div class="gridItem">div 1</div>
<div class="gridItem">div 2</div>
<div class="gridItem">div 3</div>
</div>
如果添加如下所示的columnWidth: 390,它应该可以工作。
$(document).ready(function(){
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
columnWidth: 390,
percentPosition: true
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery( 'bindUIDraggableEvents', $items );
});
我怀疑当你把所有的div移到左边时,它会认为它只有一列。
相关文章:
- json的Angularjs数据,onclick,在右边显示相应的数据
- 如何启动我的WinJs应用程序在左边弹出
- 旁白一直飘到右边,不知道该怎么修
- 如何在Javascript中添加忽略父元素左边距和填充的子元素
- 要插入二叉树的第一个元素,请将其放在左边还是右边
- 将字母移到最右边
- 当我将水平滚动条移到最左边时,垂直滚动条不可见
- 在高图表中设置左边距和右边距
- 如何将navbar品牌放在左边,将ul navbar药丸li放在右边
- 在屏幕的左边和右边设置导航箭头
- 如果class 1在左边,class 2在右边,我怎么说呢?
- 如何将固定宽度的选择框扩展到左边而不是右边
- 将鼠标放在屏幕左边,将图像移到左边,当鼠标放在屏幕右边时也是如此
- 位置固定;左边可以,右边不行
- 如何使右边的说明框上的箭头指向左边正在对焦的字段?
- Jquery UI不能从左边拖拽到右边
- Javascript手风琴菜单如何移动加上符号从右边到左边
- 从右边而不是左边切换菜单
- 如何判断一个Div是在另一个Div的左边还是右边?Jquery Javascript
- 重新定位浮动工具提示,如果它在屏幕的最左边或最右边