文章/答案/技术大牛

发布

社区首页 >问答首页 >Packery:启用Dragability和Gutter

问Packery:启用Dragability和Gutter
EN

Stack Overflow用户

提问于 2017-04-26 07:23:12

回答 1查看 668关注 0票数 1

我使用的是帕克利，一个JavaScript库和jQuery插件，它可以实现由David DeSandro创建的无障碍和拖放的布局。我使用这个来设置我的投资组合，但是下面的代码不起作用。我希望使元素可拖动(拖曳)，并在item元素(水沟)之间添加水平和垂直空间。

<!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>

javascript

html

css

packery

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-26 07:36:36

在顶部总是包括jquery.min.js。导致主要错误的原因是在最后加载了该文件，这导致了未定义的类型错误。Rest所有代码都是正确的。

这是正确的工作解决方案。

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');
});

* {
  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;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>



<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43627556

复制

相似问题

问Packery:启用Dragability和Gutter
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Packery:启用Dragability和GutterEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Packery:启用Dragability和Gutter
EN