猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

我想用来自api的数组替换我的本地数组，同时在javascript中保持相同的功能。

我已经实现了下面代码段中的功能，可以拖动和交换本地照片，它就像一个魅力。但是，现在我想用这个url中的图像替换我的本地数组 https://picsum.photos/v2/list?page=2&amp 同时仍然保持拖放功能。我怎样才能做到这一点？

Index.html（整代码 css 和 javascript）

（我假设解决方案看起来像这样）


 const url = 'https://picsum.photos/v2/list?page=2&limit=9';

 fetch(url)

 .then((response) => { return response.json(); })

 .then( data => {...} 


冉冉说
浏览 149回答 1
1回答

UYOU

您需要将函数更改为运算符，以便可以从 API 获取图像。根据您的需要映射数据。asyncawait样品：(async function () {&nbsp; const url = 'https://picsum.photos/v2/list?page=2&amp;limit=9';&nbsp; const response = await fetch(url).then((response) => response.json())&nbsp; const _imageLibrary = response.map(img => {&nbsp; &nbsp; img.image = img.download_url&nbsp; &nbsp; img.title = img.author&nbsp; &nbsp; return img&nbsp; })&nbsp; const _listedImageIds = _imageLibrary.map(({&nbsp; &nbsp; id&nbsp; }) => id)})()工作样本：<html><head>&nbsp; <title>Drag and Drop</title>&nbsp; <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">&nbsp; <style>&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; background: rgb(255, 246, 231);&nbsp; &nbsp; }&nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; font-family: 'Roboto Slab', serif;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-vc {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; transform: translateY(-50%);&nbsp; &nbsp; }&nbsp; &nbsp; .dd-transition {&nbsp; &nbsp; &nbsp; transition: all 0.3s ease;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-shadow {&nbsp; &nbsp; &nbsp; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);&nbsp; &nbsp; }&nbsp; &nbsp; #dragDrop {&nbsp; &nbsp; &nbsp; width: 1000px;&nbsp; &nbsp; &nbsp; margin: 20px auto 0;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-slot {&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; outline: 2px dashed rgba(54, 86, 132, 0.75);&nbsp; &nbsp; &nbsp; outline-offset: -15px;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; pointer-events: none;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-slot-num {&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; color: rgba(0, 0, 0, 0.1);&nbsp; &nbsp; &nbsp; font-size: 40px;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-item {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-item.dd-disabled {&nbsp; &nbsp; &nbsp; pointer-events: none;&nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-item.dd-selected {&nbsp; &nbsp; &nbsp; z-index: 20;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-item-inner {&nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-item-panel {&nbsp; &nbsp; &nbsp; width: 80%;&nbsp; &nbsp; &nbsp; height: 35px;&nbsp; &nbsp; &nbsp; background: #fff;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; left: 10%;&nbsp; &nbsp; &nbsp; bottom: -15px;&nbsp; &nbsp; &nbsp; z-index: 5;&nbsp; &nbsp; }&nbsp; &nbsp; .dd-item-title {&nbsp; &nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; &nbsp; color: #365684;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; line-height: 35px;&nbsp; &nbsp; }&nbsp; </style></head><body>&nbsp; <div id="dragDrop"></div>&nbsp; <script>&nbsp; &nbsp; (async function () {&nbsp; &nbsp; &nbsp; const url = 'https://picsum.photos/v2/list?page=2&amp;limit=9';&nbsp; &nbsp; &nbsp; const response = await fetch(url).then((response) => response.json())&nbsp; &nbsp; &nbsp; const _imageLibrary = response.map(img => {&nbsp; &nbsp; &nbsp; &nbsp; img.image = img.download_url&nbsp; &nbsp; &nbsp; &nbsp; img.title = img.author&nbsp; &nbsp; &nbsp; &nbsp; return img&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; const _listedImageIds = _imageLibrary.map(({&nbsp; &nbsp; &nbsp; &nbsp; id&nbsp; &nbsp; &nbsp; }) => id)&nbsp; &nbsp; &nbsp; var _doc = window.document;&nbsp; &nbsp; &nbsp; var _numOfImageSlots = 12,&nbsp; &nbsp; &nbsp; &nbsp; _numOfImagesPerRow = 3,&nbsp; &nbsp; &nbsp; &nbsp; _imageMarginBottom = 30;&nbsp; &nbsp; &nbsp; var _imageAspectWidth = 1920,&nbsp; &nbsp; &nbsp; &nbsp; _imageAspectHeight = 1080;&nbsp; &nbsp; &nbsp; var _imageSlots = [],&nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement = null,&nbsp; &nbsp; &nbsp; &nbsp; _originalImageSlot = null,&nbsp; &nbsp; &nbsp; &nbsp; _originalClickCoords = null,&nbsp; &nbsp; &nbsp; &nbsp; _lastTouchedSlotId = null;&nbsp; &nbsp; &nbsp; function init() {&nbsp; &nbsp; &nbsp; &nbsp; addImageSlots();&nbsp; &nbsp; &nbsp; &nbsp; drawImages();&nbsp; &nbsp; &nbsp; &nbsp; _doc.getElementById('dragDrop').addEventListener('mousemove', imageMousemove);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function addImageSlots() {&nbsp; &nbsp; &nbsp; &nbsp; var i = 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; len = _numOfImageSlots,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item;&nbsp; &nbsp; &nbsp; &nbsp; var wrap = _doc.getElementById('dragDrop');&nbsp; &nbsp; &nbsp; &nbsp; for (; i < len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item = _doc.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.setAttribute('class', 'dd-slot');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.setAttribute('style', 'width:' + (100 / _numOfImagesPerRow) + '%;padding-bottom:' + ((100 /&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _numOfImagesPerRow) * (_imageAspectHeight / _imageAspectWidth)) + '%;margin-bottom:' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _imageMarginBottom + 'px;');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.innerHTML = '<p class="dd-slot-num dd-vc">' + (i + 1) + '</p>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrap.appendChild(item);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function drawImages() {&nbsp; &nbsp; &nbsp; &nbsp; var i = 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; len = _numOfImageSlots,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item;&nbsp; &nbsp; &nbsp; &nbsp; var wrap = _doc.getElementById('dragDrop');&nbsp; &nbsp; &nbsp; &nbsp; var slot = _doc.getElementsByClassName('dd-slot')[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bounds = slot.getBoundingClientRect(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemWidth = bounds.width,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemHeight = bounds.height;&nbsp; &nbsp; &nbsp; &nbsp; var itemX,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemY;&nbsp; &nbsp; &nbsp; &nbsp; var imageId,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image;&nbsp; &nbsp; &nbsp; &nbsp; for (; i < len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageId = _listedImageIds[i] || -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image = getImageById(imageId);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemX = (i % _numOfImagesPerRow) * itemWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemY = Math.floor(i / _numOfImagesPerRow) * (itemHeight + _imageMarginBottom);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item = _doc.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.setAttribute('class', 'dd-item dd-transition' + (imageId < 0 ? ' dd-disabled' : ''));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.setAttribute('data-image-id', imageId);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.setAttribute('style', 'width:' + itemWidth + 'px;height:' + itemHeight +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'px;transform:translate3d(' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemX + 'px,' + itemY + 'px,0);');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.innerHTML = '<div class="dd-item-inner dd-shadow" style="' + (image ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-image:url(' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image.image + ')') : '') + '"><div class="dd-item-panel dd-shadow"><h3 class="dd-item-title">' + (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; image ? image.title : '') + '</h3></div></div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrap.appendChild(item);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.addEventListener('mousedown', imageMousedown);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.addEventListener('mouseup', imageMouseup);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _imageSlots[i] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: itemWidth,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: itemHeight,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: itemX,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: itemY&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function arrangeItems() {&nbsp; &nbsp; &nbsp; &nbsp; var i = 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; len = _listedImageIds.length,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slot,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ele;&nbsp; &nbsp; &nbsp; &nbsp; for (; i < len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slot = _imageSlots[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ele = _doc.querySelector('[data-image-id="' + _listedImageIds[i] + '"]');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ele.style.transform = 'translate3d(' + slot.x + 'px,' + slot.y + 'px,0)';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function imageMousedown(event) {&nbsp; &nbsp; &nbsp; &nbsp; if (!_selectedImageElement) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement = event.currentTarget;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _originalClickCoords = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: event.pageX,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: event.pageY&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _originalImageSlot = getIndexOfImageId(_selectedImageElement.getAttribute('data-image-id'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement.classList.add('dd-selected');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement.classList.remove('dd-transition');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function imageMousemove(event) {&nbsp; &nbsp; &nbsp; &nbsp; if (_selectedImageElement) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var wrap = _doc.getElementById('dragDrop'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bounds = wrap.getBoundingClientRect(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left = bounds.left,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top = bounds.top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var pageX = event.pageX,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageY = event.pageY;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var clickX = pageX - left,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clickY = pageY - top,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hoverSlotId = getSlotIdByCoords({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: clickX,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: clickY&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ele = _selectedImageElement,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imageId = ele.getAttribute('data-image-id'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index = _originalImageSlot,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newIndex = getIndexOfImageId(imageId),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x = _imageSlots[index].x,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y = _imageSlots[index].y;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var resultX = x + (pageX - _originalClickCoords.x),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultY = y + (pageY - _originalClickCoords.y);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hoverSlotId != undefined && _lastTouchedSlotId != hoverSlotId) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _lastTouchedSlotId = hoverSlotId;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _listedImageIds.splice(hoverSlotId, 0, _listedImageIds.splice(newIndex, 1)[0]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arrangeItems();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ele.style.transform = 'translate3d(' + resultX + 'px,' + resultY + 'px,0)';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function imageMouseup() {&nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement.classList.remove('dd-selected');&nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement.classList.add('dd-transition');&nbsp; &nbsp; &nbsp; &nbsp; _selectedImageElement = null;&nbsp; &nbsp; &nbsp; &nbsp; _originalClickCoords = null;&nbsp; &nbsp; &nbsp; &nbsp; arrangeItems();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function getSlotIdByCoords(coords) {&nbsp; &nbsp; &nbsp; &nbsp; // Get the current slot being hovered over&nbsp; &nbsp; &nbsp; &nbsp; for (var id in _imageSlots) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var slot = _imageSlots[id];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (slot.x <= coords.x && coords.x <= slot.x + slot.width && slot.y <= coords.y && coords.y <= slot.y +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slot&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .height)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return id;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function getImageById(id) {&nbsp; &nbsp; &nbsp; &nbsp; return _imageLibrary.find(function (image) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return image.id == id;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function getIndexOfImageId(id) {&nbsp; &nbsp; &nbsp; &nbsp; var i = 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; len = _listedImageIds.length;&nbsp; &nbsp; &nbsp; &nbsp; for (; i < len; i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (_listedImageIds[i] == id)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return i;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; init();&nbsp; &nbsp; })();&nbsp; </script></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript