Javascript 封隔器：启用排水性和排水沟
我使用的是由David DeSandro创建的一个JavaScript库和jQuery插件，它可以制作无间隙和可拖动的布局。 我用它来设置我的投资组合，但下面的代码不起作用。我希望使元素可拖动（），并在项目元素之间添加水平和垂直空间（）Javascript 封隔器：启用排水性和排水沟,javascript,html,css,packery,Javascript,Html,Css,Packery,我使用的是由David DeSandro创建的一个JavaScript库和jQuery插件，它可以制作无间隙和可拖动的布局。 我用它来设置我的投资组合，但下面的代码不起作用。我希望使元素可拖动（），并在项目元素之间添加水平和垂直空间（） *{框大小：边框框；} 正文{字体系列：无衬线；} .电网{ 背景：DDD； 最大宽度：1200px； } .网格：之后{ 内容：''； 显示：块； 明确：两者皆有； } .表格项目{ 浮动：左； 宽度：100px； 高度：100px； 背景：#C09； 边框
*{框大小：边框框；}
正文{字体系列：无衬线；}
.电网{
背景：DDD；
最大宽度：1200px；
}
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.表格项目{
浮动：左；
宽度：100px；
高度：100px；
背景：#C09；
边框：2倍实心hsla（0,0%，0,0.5）；
}
.grid项--width2{width:200px；}
.grid项--高度2{高度：200px；}
.网格项：悬停{
边框颜色：hsla（0,0%，100%，0.5）；
光标：移动；
}
.grid-item.is-drawing，
.grid-item.is-positioning-post-drag{
背景：#C90；
z指数：2；
}
.封隔器放置位置{
轮廓：3倍虚线hsla（0,0%，0,0.5）；
轮廓偏移：-6px；
-webkit转换：-webkit转换0.2s；
转变：转变0.2s；
}
变量$grid=$（'.grid'）。packer({
itemSelector:“.grid项”，
列宽：100，
排水沟：10
});
//使所有网格项都可拖动
$grid.find（'.grid-item'）。每个（函数（i，gridItem）{
var draggie=new draggabily（gridItem）；//将拖动事件绑定到Packery
$grid.PACKEY（'BindDragAbililyEvents'，draggie）；
});
$grid.on（'click'，'grid item'，函数（事件）{
//通过切换大类更改项目的大小
$（event.currentTarget）.toggleClass（'grid-item--large'）；
//项目大小更改后触发布局
$grid.PACKEY（“布局”）；
});
var$grid=$（'.grid'）.packery({
itemSelector:“.grid项”，
列宽：100，
排水沟：10
});
//使所有网格项都可拖动
$grid.find（'.grid-item'）。每个（函数（i，gridItem）{
var draggie=new draggabily（gridItem）；//将拖动事件绑定到Packery
$grid.PACKEY（'BindDragAbililyEvents'，draggie）；
});
$grid.on（'click'，'grid item'，函数（事件）{
//通过切换大类更改项目的大小
$（event.currentTarget）.toggleClass（'grid-item--large'）；
//项目大小更改后触发布局
$grid.PACKEY（“布局”）；
});
*{
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.电网{
背景：DDD；
最大宽度：1200px；
}
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.表格项目{
浮动：左；
宽度：100px；
高度：100px；
背景：#C09；
边框：2倍实心hsla（0,0%，0,0.5）；
}
.网格项--宽度2{
宽度：200px；
}
.网格项--高度2{
高度：200px；
}
.网格项：悬停{
边框颜色：hsla（0,0%，100%，0.5）；
光标：移动；
}
.grid-item.is-drawing，
.grid-item.is-positioning-post-drag{
背景：#C90；
z指数：2；
}
.封隔器放置位置{
轮廓：3倍虚线hsla（0,0%，0,0.5）；
轮廓偏移：-6px；
-webkit转换：-webkit转换0.2s；
转变：转变0.2s；
}
始终在顶部包含jquery.min.js。主要错误是由于文件在末尾加载，导致未定义封隔器的未捕获类型错误。Rest所有代码都是正确的
这是正确的工作解决方案
var$grid=$（'.grid'）.packery({
itemSelector:“.grid项”，
列宽：100，
排水沟：10
});
//使所有网格项都可拖动
$grid.find（'.grid-item'）。每个（函数（i，gridItem）{
var draggie=new draggabily（gridItem）；//将拖动事件绑定到Packery
$grid.PACKEY（'BindDragAbililyEvents'，draggie）；
});
$grid.on（'click'，'grid item'，函数（事件）{
//通过切换大类更改项目的大小
$（event.currentTarget）.toggleClass（'grid-item--large'）；
//项目大小更改后触发布局
$grid.PACKEY（“布局”）；
});
*{
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.电网{
背景：DDD；
最大宽度：1200px；
}
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.表格项目{
浮动：左；
宽度：100px；
高度：100px；
背景：#C09；
边框：2倍实心hsla（0,0%，0,0.5）；
}
.网格项--宽度2{
宽度：200px；
}
.网格项--高度2{
高度：200px；
}
.网格项：悬停{
边框颜色：hsla（0,0%，100%，0.5）；
光标：移动；
}
.grid-item.is-drawing，
.grid-item.is-positioning-post-drag{
背景：#C90；
z指数：2；
}
.封隔器放置位置{
轮廓：3倍虚线hsla（0,0%，0,0.5）；
轮廓偏移：-6px；
-webkit转换：-webkit转换0.2s；
转变：转变0.2s；
}
它的哪个部分不工作..它的哪个部分不工作..当它位于服务器外部时，以下代码不工作。例如，我只是把它放在桌面上，它不工作，但当放在服务器或本地主机上时，它工作正常。但是，谢谢：）@Sahil dhir仍然不在服务器外部工作，但在服务器内部工作@Sahil Dhir未显示任何错误说明。就在我尝试拖动单元格时，什么都没发生。甚至连排水沟都没有启用。当文件位于本地主机或服务器之外时。尝试在桌面上使用上面给定的代码创建一个.html文件，并查看以下输出sir@Sahil dhir当位于服务器外部时，以下代码不起作用。例如，我只是把它放在桌面上，它不工作，但当放在服务器或本地主机上时，它工作正常。不过，谢谢你：）@Sahil dhir仍然没有
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/draggabilly@2/dist/draggabilly.pkgd.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="grid">
<div class="grid-item grid-item--width2"><img src="http://www.naturalnews.com/gallery/640/Food/Fancy-Food.jpg" style="width: 100%; height: 100%;"></div>
<div class="grid-item"><img src="https://s3-us-west-1.amazonaws.com/cdn.myawesomeurls.com/2317223231481790331/collections/9169011391481887406/bg_image.jpg" style="width: 100%; height: 100%;"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
<style type="text/css">
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.grid {
background: #DDD;
max-width: 1200px;
}
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #C09;
border: 2px solid hsla(0, 0%, 0%, 0.5);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
.grid-item:hover {
border-color: hsla(0, 0%, 100%, 0.5);
cursor: move;
}
.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
background: #C90;
z-index: 2;
}
.packery-drop-placeholder {
outline: 3px dashed hsla(0, 0%, 0%, 0.5);
outline-offset: -6px;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
</style>
<script type="text/javascript">
var $grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100,
gutter: 10
});
// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
var draggie = new Draggabilly( gridItem ); // bind drag events to Packery
$grid.packery( 'bindDraggabillyEvents', draggie );
});
$grid.on( 'click', '.grid-item', function( event ) {
// change size of item by toggling large class
$( event.currentTarget ).toggleClass('grid-item--large');
// trigger layout after item size changes
$grid.packery('layout');
});
</script>