javascript - 将函数分配给对象属性

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

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

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

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它有效。

我的错在哪里？是因为我调用了嵌套在其他函数中的匿名函数吗？

感谢您的帮助!

最佳答案

这本身不是答案，但您的代码应该运行良好(正如您在下面的运行代码片段中看到的那样)。
看来您没有正确调用该函数。

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>

关于javascript - 将函数分配给对象属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47274774/

javascript - 将函数分配给对象属性

上一篇：Javascript 动画播放按钮

下一篇：javascript - 加载时介绍