News
Acerca
Proyectos
Blurry loading effect
slide show – javascript
Redes sociales
Play
HTML JS Y CSS
<link data-minify="1" rel="stylesheet" href="https://josealberto.xyz/wp-content/cache/min/1/ajax/libs/font-awesome/6.5.2/css/all.min.css?ver=1767797036" crossorigin="anonymous" referrerpolicy="no-referrer" /> <h1> 10 personas más ricas del mundo </h1> <p>Drag an drop the items into teri corresponding spots</p> <ul class="draggable-list" id="draggable_list"></ul> <button class="check-btn" id="check"> Check Order <i class="fas fa-paper-plane"></i> </button> <script type="rocketlazyloadscript"> const draggable_list = document.getElementById("draggable_list"); const check = document.getElementById("check"); const richestPeople = ['Jeff Bezos','Carlos Slim','Elias Ayub']; const listItems = []; let dragStartIndex; createList(); function createList(){ [...richestPeople] .map(a =>({value:a, sort: Math.random() })) .sort((a, b) => a.sort - b.sort) .map(a => a.value) .forEach((person, index) => { const listItem = document.createElement('li'); listItem.setAttribute('data-index', index); console.log(person); listItem.innerHTML = ` <span class="number">${index + 1}</span> <div class="draggable" draggable="true"> <p class="person-name">${person}</p> <i class="fas fa-grip-lines"></i> </div> `; listItems.push(listItem); draggable_list.appendChild(listItem); }); } </script>
RESULTADO
