У меня есть код Const randItem2 , который выбирает случайную метку и ее URL без дубликатов из массива Элементы
Как получить метку, чтобы ее можно было установить на ptags для отображения внутри класса box и переместите элемент в tempImages [] для прокрутки, как я уже сделал.
Короче говоря, как отобразитьпроизвольно выбранное значение без дубликатов Const randItem2 его значение метки ptags и его URL-адрес к tempImages [] , подобно тем же эффектам, что и код ниже Const randItem2
Как этого добиться?
var tempimages = [];
function rvalue() {
const
items = [
{ label: '1', url: 'https://via.placeholder.com/75x75?text=1' },
{ label: '2', url: 'https://via.placeholder.com/75x75?text=2' },
{ label: '3', url: 'https://via.placeholder.com/75x75?text=3' },
{ label: '4', url: 'https://via.placeholder.com/75x75?text=4' },
{ label: '5', url: 'https://via.placeholder.com/75x75?text=5' },
{ label: '6', url: 'https://via.placeholder.com/75x75?text=6' },
{ label: '7', url: 'https://via.placeholder.com/75x75?text=7' },
{ label: '8', url: 'https://via.placeholder.com/75x75?text=8' },
{ label: '9', url: 'https://via.placeholder.com/75x75?text=9' },
{ label: '10',url: 'https://via.placeholder.com/75x75?text=10' }
],
ptags = document.querySelectorAll('[name="values"]');
var lastnumber=0;
for (let index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() * items.length),
// const randItem2 = Array.from({ length: 3 },() => {const randomIndex = Math.floor(Math.random() * items.length);const [item] = items.splice(randomIndex, 1);return item;
item = items[randomIndex];
ptags[index].textContent = item.label;
tempimages.push(item);
}
}
function displayAllImages() {
if (tempimages.length === 0)
{
return;
}
item = tempimages.shift(),
image = document.getElementById('slide');
image.src = item.url;
};
$(function() {
rvalue();
displayAllImages();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
el.parentNode.removeChild;
ev.currentTarget.style.backgroundColor = 'initial';
var pParagraph = ev.currentTarget.firstElementChild;
ev.currentTarget.removeChild(pParagraph);
// Show the next image in the slider..
displayAllImages();
}
#container {
margin-top:-2%;
white-space:nowrap;
text-align:center;
margin-left:20%;
margin-right:30%;
}
.box {
background-color: coral;
width: 60px;
height:60px;
margin-top:10px;
display:inline-block;
border-radius:5px;
border:2px solid #333;
border-color: #e6e600;
border-radius: 10%;
background-color: #ff00ff;
}
.box002 {
float: left;
width: 50px;
height: 50px;
float: left;
margin-left:30%;
margin-top:-20px;
padding-top:2%;
background-color:#ffff00 2px;
border:2px solid #000066;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
#container {
white-space:nowrap;
text-align:center;
margin-left:20%;
margin-right:30%;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="rvalue()">
<div class="containerr">
<div id="container" style="margin-bottom:10%">
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
</div>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>
</div>
</body>