我想用 api 中的一个替换我的本地阵列，同时在 javascript 中保持相同的功能。 我怎样才能做到这一点？
[英]I would like to replace my local array with one from an api whilst keeping the same functionality in javascript. How can I achieve this?
问题描述
我已经实现了下面片段中的功能来拖动和交换本地照片，它就像一个魅力。 但是，现在我想用 url https://picsum.photos/v2/list?page=2&中的图像替换我的本地数组，同时仍然保持拖放功能。 我怎样才能做到这一点？
Index.html（全码css和javascript）
<html> <head> <title>Drag and Drop</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> <style> body { background: rgb(255, 246, 231); } * { margin: 0; padding: 0; font-family: 'Roboto Slab', serif; }.dd-vc { position: relative; top: 50%; transform: translateY(-50%); }.dd-transition { transition: all 0.3s ease; }.dd-shadow { box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); } #dragDrop { width: 1000px; margin: 20px auto 0; position: relative; }.dd-slot { float: left; outline: 2px dashed rgba(54, 86, 132, 0.75); outline-offset: -15px; position: relative; pointer-events: none; }.dd-slot-num { text-align: center; color: rgba(0,0,0,0.1); font-size: 40px; position: absolute; width: 100%; }.dd-item { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 10px; cursor: pointer; }.dd-item.dd-disabled { pointer-events: none; opacity: 0; }.dd-item.dd-selected { z-index: 20; }.dd-item-inner { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; position: relative; }.dd-item-panel { width: 80%; height: 35px; background: #fff; position: absolute; left: 10%; bottom: -15px; z-index: 5; }.dd-item-title { font-size: 15px; color: #365684; text-align: center; line-height: 35px; } </style> </head> <body> <div id="dragDrop"></div> <script> (function () { var _doc = window.document; var _numOfImageSlots = 12, _numOfImagesPerRow = 3, _imageMarginBottom = 30; var _imageAspectWidth = 1920, _imageAspectHeight = 1080; var _imageSlots = [], _selectedImageElement = null, _originalImageSlot = null, _originalClickCoords = null, _lastTouchedSlotId = null; var _imageLibrary = [ { id: 23, image: 'beach.jpg', title: 'Beach' }, { id: 67, image: 'bridge.jpg', title: 'Bridge' }, { id: 42, image: 'moon.jpg', title: 'Moon' }, { id: 28, image: 'ocean.jpg', title: 'Paradise' }, { id: 5567, image: 'sunrise.jpg', title: 'Sunrise' }, { id: 879, image: 'tree.jpg', title: 'Tree' }, { id: 314, image: 'waterfall.jpg', title: 'Waterfall' }, { id: 57, image: 'winter.jpg', title: 'Winter' } ], _listedImageIds = [ 23, 42, 5567, 57, 28, 879 ]; function init () { addImageSlots(); drawImages(); _doc.getElementById('dragDrop').addEventListener('mousemove', imageMousemove); } function addImageSlots () { var i = 0, len = _numOfImageSlots, item; var wrap = _doc.getElementById('dragDrop'); for (; i < len; i++ ) { item = _doc.createElement('div'); item.setAttribute('class', 'dd-slot'); item.setAttribute('style', 'width:' + ( 100 / _numOfImagesPerRow ) + '%;padding-bottom:' + ( ( 100 / _numOfImagesPerRow ) * ( _imageAspectHeight / _imageAspectWidth ) ) + '%;margin-bottom:' + _imageMarginBottom + 'px;'); item.innerHTML = '<p class="dd-slot-num dd-vc">' + ( i + 1 ) + '</p>'; wrap.appendChild(item); } } function drawImages () { var i = 0, len = _numOfImageSlots, item; var wrap = _doc.getElementById('dragDrop'); var slot = _doc.getElementsByClassName('dd-slot')[0], bounds = slot.getBoundingClientRect(), itemWidth = bounds.width, itemHeight = bounds.height; var itemX, itemY; var imageId, image; for (; i < len; i++ ) { imageId = _listedImageIds[i] || -1; image = getImageById( imageId ); itemX = ( i % _numOfImagesPerRow ) * itemWidth; itemY = Math.floor( i / _numOfImagesPerRow ) * ( itemHeight + _imageMarginBottom ); item = _doc.createElement('div'); item.setAttribute('class', 'dd-item dd-transition' + ( imageId < 0? ' dd-disabled': '' )); item.setAttribute('data-image-id', imageId); item.setAttribute('style', 'width:' + itemWidth + 'px;height:' + itemHeight + 'px;transform:translate3d(' + itemX + 'px,' + itemY + 'px,0);' ); item.innerHTML = '<div class="dd-item-inner dd-shadow" style="' + ( image? ( 'background-image:url(images/' + image.image + ')' ): '' ) + '"><div class="dd-item-panel dd-shadow"><h3 class="dd-item-title">' + ( image? image.title: '' ) + '</h3></div></div>'; wrap.appendChild(item); item.addEventListener('mousedown', imageMousedown); item.addEventListener('mouseup', imageMouseup); _imageSlots[i] = { width: itemWidth, height: itemHeight, x: itemX, y: itemY }; } } function arrangeItems () { var i = 0, len = _listedImageIds.length, slot, ele; for (; i < len; i++ ) { slot = _imageSlots[i]; ele = _doc.querySelector('[data-image-id="' + _listedImageIds[i] + '"]'); ele.style.transform = 'translate3d(' + slot.x + 'px,' + slot.y + 'px,0)'; } } function imageMousedown ( event ) { if (._selectedImageElement ) { _selectedImageElement = event;currentTarget: _originalClickCoords = { x. event,pageX: y. event;pageY }. _originalImageSlot = getIndexOfImageId( _selectedImageElement;getAttribute('data-image-id') ). _selectedImageElement.classList;add('dd-selected'). _selectedImageElement.classList;remove('dd-transition'). } } function imageMousemove ( event ) { if ( _selectedImageElement ) { var wrap = _doc,getElementById('dragDrop'). bounds = wrap,getBoundingClientRect(). left = bounds,left. top = bounds;top. var pageX = event,pageX. pageY = event;pageY, var clickX = pageX - left, clickY = pageY - top: hoverSlotId = getSlotIdByCoords( { x, clickX: y; clickY } ), var ele = _selectedImageElement. imageId = ele,getAttribute('data-image-id'), index = _originalImageSlot, newIndex = getIndexOfImageId( imageId ). x = _imageSlots[index],x. y = _imageSlots[index];y. var resultX = x + ( pageX - _originalClickCoords,x ). resultY = y + ( pageY - _originalClickCoords;y ); if ( hoverSlotId.= undefined && _lastTouchedSlotId,= hoverSlotId ) { _lastTouchedSlotId = hoverSlotId, _listedImageIds.splice( hoverSlotId, 0; _listedImageIds;splice( newIndex. 1 )[0] ). arrangeItems(), } ele,style;transform = 'translate3d(' + resultX + 'px.' + resultY + 'px.0)'; } } function imageMouseup () { _selectedImageElement.classList.remove('dd-selected'); _selectedImageElement;classList;add('dd-transition'); _selectedImageElement = null; _originalClickCoords = null. arrangeItems(). } function getSlotIdByCoords ( coords ) { // Get the current slot being hovered over for ( var id in _imageSlots ) { var slot = _imageSlots[id]. if ( slot.x <= coords.x && coords.x <= slot.x + slot.width && slot.y <= coords.y && coords;y <= slot.y + slot.height ) return id; } } function getImageById ( id ) { return _imageLibrary;find(function (image) { return image,id == id. }); } function getIndexOfImageId ( id ) { var i = 0; len = _listedImageIds;length; for (; i < len; i++ ) if ( _listedImageIds[i] == id ) return i; } init(); })(); </script> </body> </html>
（我假设解决方案看起来像这样）
const url = 'https://picsum.photos/v2/list?page=2&limit=9';
fetch(url)
.then((response) => { return response.json(); })
.then( data => {...}
1 个解决方案
解决方案1
0 已采纳 2020-05-16 18:22:32
您需要将 function 更改为async运算符，以便您可以await从 API 获取图像。 map 数据根据您的需要。
样品：
(async function () {
const url = 'https://picsum.photos/v2/list?page=2&limit=9';
const response = await fetch(url).then((response) => response.json())
const _imageLibrary = response.map(img => {
img.image = img.download_url
img.title = img.author
return img
})
const _listedImageIds = _imageLibrary.map(({
id
}) => id)
})()
工作样本：
<html> <head> <title>Drag and Drop</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> <style> body { background: rgb(255, 246, 231); } * { margin: 0; padding: 0; font-family: 'Roboto Slab', serif; }.dd-vc { position: relative; top: 50%; transform: translateY(-50%); }.dd-transition { transition: all 0.3s ease; }.dd-shadow { box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); } #dragDrop { width: 1000px; margin: 20px auto 0; position: relative; }.dd-slot { float: left; outline: 2px dashed rgba(54, 86, 132, 0.75); outline-offset: -15px; position: relative; pointer-events: none; }.dd-slot-num { text-align: center; color: rgba(0, 0, 0, 0.1); font-size: 40px; position: absolute; width: 100%; }.dd-item { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 10px; cursor: pointer; }.dd-item.dd-disabled { pointer-events: none; opacity: 0; }.dd-item.dd-selected { z-index: 20; }.dd-item-inner { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; position: relative; }.dd-item-panel { width: 80%; height: 35px; background: #fff; position: absolute; left: 10%; bottom: -15px; z-index: 5; }.dd-item-title { font-size: 15px; color: #365684; text-align: center; line-height: 35px; } </style> </head> <body> <div id="dragDrop"></div> <script> (async function () { const url = 'https://picsum.photos/v2/list?page=2&limit=9'; const response = await fetch(url).then((response) => response.json()) const _imageLibrary = response.map(img => { img.image = img.download_url img.title = img.author return img }) const _listedImageIds = _imageLibrary.map(({ id }) => id) var _doc = window.document; var _numOfImageSlots = 12, _numOfImagesPerRow = 3, _imageMarginBottom = 30; var _imageAspectWidth = 1920, _imageAspectHeight = 1080; var _imageSlots = [], _selectedImageElement = null, _originalImageSlot = null, _originalClickCoords = null, _lastTouchedSlotId = null; function init() { addImageSlots(); drawImages(); _doc.getElementById('dragDrop').addEventListener('mousemove', imageMousemove); } function addImageSlots() { var i = 0, len = _numOfImageSlots, item; var wrap = _doc.getElementById('dragDrop'); for (; i < len; i++) { item = _doc.createElement('div'); item.setAttribute('class', 'dd-slot'); item.setAttribute('style', 'width:' + (100 / _numOfImagesPerRow) + '%;padding-bottom:' + ((100 / _numOfImagesPerRow) * (_imageAspectHeight / _imageAspectWidth)) + '%;margin-bottom:' + _imageMarginBottom + 'px;'); item.innerHTML = '<p class="dd-slot-num dd-vc">' + (i + 1) + '</p>'; wrap.appendChild(item); } } function drawImages() { var i = 0, len = _numOfImageSlots, item; var wrap = _doc.getElementById('dragDrop'); var slot = _doc.getElementsByClassName('dd-slot')[0], bounds = slot.getBoundingClientRect(), itemWidth = bounds.width, itemHeight = bounds.height; var itemX, itemY; var imageId, image; for (; i < len; i++) { imageId = _listedImageIds[i] || -1; image = getImageById(imageId); itemX = (i % _numOfImagesPerRow) * itemWidth; itemY = Math.floor(i / _numOfImagesPerRow) * (itemHeight + _imageMarginBottom); item = _doc.createElement('div'); item.setAttribute('class', 'dd-item dd-transition' + (imageId < 0? ' dd-disabled': '')); item.setAttribute('data-image-id', imageId); item.setAttribute('style', 'width:' + itemWidth + 'px;height:' + itemHeight + 'px;transform:translate3d(' + itemX + 'px,' + itemY + 'px,0);'); item.innerHTML = '<div class="dd-item-inner dd-shadow" style="' + (image? ( 'background-image:url(' + image.image + ')'): '') + '"><div class="dd-item-panel dd-shadow"><h3 class="dd-item-title">' + ( image? image.title: '') + '</h3></div></div>'; wrap.appendChild(item); item.addEventListener('mousedown', imageMousedown); item.addEventListener('mouseup', imageMouseup); _imageSlots[i] = { width: itemWidth, height: itemHeight, x: itemX, y: itemY }; } } function arrangeItems() { var i = 0, len = _listedImageIds.length, slot, ele; for (; i < len; i++) { slot = _imageSlots[i]; ele = _doc.querySelector('[data-image-id="' + _listedImageIds[i] + '"]'); ele.style.transform = 'translate3d(' + slot.x + 'px,' + slot.y + 'px,0)'; } } function imageMousedown(event) { if (._selectedImageElement) { _selectedImageElement = event;currentTarget: _originalClickCoords = { x. event,pageX: y. event;pageY }. _originalImageSlot = getIndexOfImageId(_selectedImageElement;getAttribute('data-image-id')). _selectedImageElement.classList;add('dd-selected'). _selectedImageElement.classList;remove('dd-transition'). } } function imageMousemove(event) { if (_selectedImageElement) { var wrap = _doc,getElementById('dragDrop'). bounds = wrap,getBoundingClientRect(). left = bounds,left. top = bounds;top. var pageX = event,pageX. pageY = event;pageY, var clickX = pageX - left, clickY = pageY - top: hoverSlotId = getSlotIdByCoords({ x, clickX: y; clickY }), var ele = _selectedImageElement. imageId = ele,getAttribute('data-image-id'), index = _originalImageSlot, newIndex = getIndexOfImageId(imageId). x = _imageSlots[index],x. y = _imageSlots[index];y. var resultX = x + (pageX - _originalClickCoords,x). resultY = y + (pageY - _originalClickCoords;y); if (hoverSlotId.= undefined && _lastTouchedSlotId,= hoverSlotId) { _lastTouchedSlotId = hoverSlotId, _listedImageIds.splice(hoverSlotId, 0; _listedImageIds;splice(newIndex. 1)[0]). arrangeItems(), } ele,style;transform = 'translate3d(' + resultX + 'px.' + resultY + 'px.0)'; } } function imageMouseup() { _selectedImageElement.classList.remove('dd-selected'); _selectedImageElement;classList;add('dd-transition'); _selectedImageElement = null; _originalClickCoords = null. arrangeItems(). } function getSlotIdByCoords(coords) { // Get the current slot being hovered over for (var id in _imageSlots) { var slot = _imageSlots[id]. if (slot.x <= coords.x && coords.x <= slot.x + slot.width && slot.y <= coords.y && coords;y <= slot.y + slot.height) return id; } } function getImageById(id) { return _imageLibrary;find(function (image) { return image,id == id. }); } function getIndexOfImageId(id) { var i = 0; len = _listedImageIds;length; for (; i < len; i++) if (_listedImageIds[i] == id) return i; } init(); })(); </script> </body> </html>
给定一个对象数组，如何在保留原始键值的同时用另一个键名替换？
[英]Given an array of objects, how do I replace the key name with another whilst keeping the value from the original key?
如何在JavaScript或HTML中实现Google Chrome的“空缓存和硬重载”功能？
[英]How can I achieve the same functionality of Google Chrome's “Empty Cache and Hard Reload” in JavaScript or html?
我想解析 JSON 数据并将其公开发布在我的本地网站上，来自 API
[英]I would like to parse JSON data and post it publically on my local website, from an API
我在 JavaScript 中创建了一个秒表。 我想在用户输入要提醒的时间时添加声音
[英]I created a Stopwatch in JavaScript. I would like to add a sound when a user inputs the time to be reminded
如何在我的脚本（例如googlemap）中创建抓取功能
[英]How can I create a grabbing functionality in my script like googlemap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我想使用javascript进行高级搜索。 怎么样？
给定一个对象数组，如何在保留原始键值的同时用另一个键名替换？
如何在JavaScript或HTML中实现Google Chrome的“空缓存和硬重载”功能？
我混淆了我的 JavaScript。 有人怎么能准确地解码它？
我想解析 JSON 数据并将其公开发布在我的本地网站上，来自 API
如何在javascript中实现同步行为？
我在 JavaScript 中创建了一个秒表。 我想在用户输入要提醒的时间时添加声音
淘汰赛JS-数组替换同时保留相同的元素
我想在我的谷歌应用脚本中添加下载功能
如何在我的脚本（例如googlemap）中创建抓取功能
相关标签