gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:59:16 25 4
gpt4 key购买 nike

我正在构建一个可拖动的网格,其中包含从本地存储生成的网格项。对于可拖动网格,我使用库 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com