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

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

转载作者：行者123 更新时间：2023-11-28 03:59:16

25

4

我正在构建一个可拖动的网格，其中包含从本地存储生成的网格项。对于可拖动网格，我使用库 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/

25

4

0

文章推荐： javascript - 带铣削 Angular Material 组件

文章推荐： javascript - 加载时介绍

文章推荐： c++ - 使用带直接 x 的点 Sprite 。需要采取什么步骤？

文章推荐： c++ - boost线程池库中的问题

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

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