Question

我正在构建一个可拖动的网格，其中包含从本地存储生成的网格项。对于可拖动的网格，我使用库Muuri。

因此，我使用类.bookmark-container Muuri对象生成所有元素，并指定一些属性。属性dragSort包含数组形式的所有容器元素，允许将元素从一个容器拖动到另一个容器。

这是我的js代码。 gridObjects是全局定义的，函数createbookmarkContainer在body.onload上调用。

function createBookmarkContainer() {

  var bookmarkContainers = Array.prototype.slice.call($('.bookmark-container'));

  gridObjects = [];

  for(var i = 0; i < bookmarkContainers.length; i++) {
    gridObjects[i] = new Muuri(bookmarkContainers[i], {
      dragEnabled: true,
      dragSort: function () {
        return gridObjects
      }
    });
  }
}

当我拖动一个项目时，它不会在dragSort属性中调用我的匿名函数。但是，在我简化的codepen example中，它可以运作。

我的错在哪里？是因为我调用嵌套在另一个函数中的匿名函数吗？

感谢您的帮助！

Answer 1

这不是本身的答案，但您的代码应运行良好（正如您在下面的运行代码中所见）。
您似乎没有正确调用该函数。

function createBookmarkContainer() {

  var bookmarkContainers = Array.prototype.slice.call($('.bookmark-container'));

  gridObjects = [];

  for(var i = 0; i < bookmarkContainers.length; i++) {
    gridObjects[i] = new Muuri(bookmarkContainers[i], {
      dragEnabled: true,
      dragSort: function () {
        return gridObjects
      }
    });
  }
}

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body {
	background-color: #2C3135;
	padding: 0;
	font-family: "roboto";
}

h1 {
	padding: 0;
	margin: 40px 0px 0px 20px;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 2px;
	color: rgba(255,255,255, .8);
}

.bookmark-container {
	position: relative;
	//background-color: rgba(255,255,255,.02);
	margin: 20px 0;
}
.item {
	position: absolute;
	width: 250px;
	height: 60px;
	line-height: 60px;
	margin: 15px;
	z-index: 1;
}

.item-content {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #3E444D;
	text-align: center;
	border-radius: 5px;
  	box-shadow: 0px 10px 20px 0px rgba(47,47,47,0.03);
	font-size: 12px;
	color: white;
	cursor: pointer;
}

.item.muuri-dragging,
.item.muuri-releasing {
	z-index: 2;
}
.item.muuri-hidden {
	z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.0/muuri.min.js"></script>

<body onload="createBookmarkContainer()">
<h1>SECTION 1</h1>
<div class="bookmark-container c1">
 <div class="item">
  <div class="item-content">1</div>
 </div>
 <div class="item">
  <div class="item-content">2</div>
 </div>
 <div class="item">
  <div class="item-content">3</div>
 </div>
 <div class="item">
  <div class="item-content">4</div>
 </div>
 <div class="item">
  <div class="item-content">5</div>
 </div>
 <div class="item">
  <div class="item-content">6</div>
 </div>
 <div class="item">
  <div class="item-content">7</div>
 </div>
 <div class="item">
  <div class="item-content">8</div>
 </div>
 <div class="item">
  <div class="item-content">9</div>
 </div>
 <div class="item">
  <div class="item-content">10</div>
 </div>
</div>

<h1>SECTION 2</h1>
<div class="bookmark-container c2">
 <div class="item">
  <div class="item-content">1</div>
 </div>
 <div class="item">
  <div class="item-content">2</div>
 </div>
 <div class="item">
  <div class="item-content">3</div>
 </div>
 <div class="item">
  <div class="item-content">4</div>
 </div>
 <div class="item">
  <div class="item-content">5</div>
 </div>
 <div class="item">
  <div class="item-content">6</div>
 </div>
 <div class="item">
  <div class="item-content">7</div>
 </div>
 <div class="item">
  <div class="item-content">8</div>
 </div>
 <div class="item">
  <div class="item-content">9</div>
 </div>
 <div class="item">
  <div class="item-content">10</div>
 </div>
</div>

<h1>SECTION 3</h1>
<div class="bookmark-container c3">
 <div class="item">
  <div class="item-content">1</div>
 </div>
 <div class="item">
  <div class="item-content">2</div>
 </div>
 <div class="item">
  <div class="item-content">3</div>
 </div>
 <div class="item">
  <div class="item-content">4</div>
 </div>
 <div class="item">
  <div class="item-content">5</div>
 </div>
 <div class="item">
  <div class="item-content">6</div>
 </div>
 <div class="item">
  <div class="item-content">7</div>
 </div>
 <div class="item">
  <div class="item-content">8</div>
 </div>
 <div class="item">
  <div class="item-content">9</div>
 </div>
 <div class="item">
  <div class="item-content">10</div>
 </div>
</div>

<h1>SECTION 4</h1>
<div class="bookmark-container c3">
 <div class="item">
  <div class="item-content">1</div>
 </div>
 <div class="item">
  <div class="item-content">2</div>
 </div>
 <div class="item">
  <div class="item-content">3</div>
 </div>
 <div class="item">
  <div class="item-content">4</div>
 </div>
 <div class="item">
  <div class="item-content">5</div>
 </div>
 <div class="item">
  <div class="item-content">6</div>
 </div>
 <div class="item">
  <div class="item-content">7</div>
 </div>
 <div class="item">
  <div class="item-content">8</div>
 </div>
 <div class="item">
  <div class="item-content">9</div>
 </div>
 <div class="item">
  <div class="item-content">10</div>
 </div>
</div>
</body>

将函数赋给对象属性

1 个答案: