Drag and drop

Developer
Anna
Size
2,706 Kb
Views
12,144
  1. Drag and drop Previews
  2. Drag and drop HTML Codes
  3. Drag and drop CSS Codes
  4. Drag and drop JS Codes

How do I make an drag and drop?

What is a drag and drop? How do you make a drag and drop? This script and codes were developed by Anna on 01 December 2022, Thursday.

Drag and drop Previews
IQ Test

Drag and drop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>drag and drop</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id='upload' type="file" name="" value=""> <div id="drop"></div> <button id='delete' type="button">刪除</button> <script src="js/index.js"></script>
</body>
</html>

Drag and drop - Script Codes CSS Codes

.over { border: 3px solid red; }
#drop img { height: 60px;
}

Drag and drop - Script Codes JS Codes

const upload = document.querySelector('#upload');
const drop = document.querySelector('#drop');
const deletebtn = document.querySelector('#delete');
let targetElem = null;
let dropImgs = [];
const max = 3;
function startEvent(el) { const target = el.target; target.style.opacity = .5; targetElem = this; el.dataTransfer.setData("text/uri-list", target.src); el.dataTransfer.setData("text/plain", target.dataset.num); el.dataTransfer.effectAllowed = "move";
}
function enterEvent(el) { const target = el.target; el.stopPropagation(); el.preventDefault(); target.classList.add('over')
}
function leaveEvent(el) { const target = el.target; target.classList.remove('over');
}
function endEvent(el) { const target = el.target; target.style.opacity = 1; [].forEach.call(dropImgs, (elem) => { elem.classList.remove('over') })
}
function overEvent(el) { el.stopPropagation(); el.preventDefault(); el.dataTransfer.dropEffect = "move";
}
function dropEvent(el) { el.stopPropagation(); el.preventDefault(); el.target.classList.remove('over'); var dt = el.dataTransfer; var data = dt.getData("text/uri-list"); //copy elem var dataSet = dt.getData("text/plain"); //copy elem var files = dt.files; targetElem.dataset.num = this.dataset.num; //1 targetElem.src = this.src; el.target.dataset.num = dataSet; //0 el.target.src = data;
}
function imgPreview(files) { const fileList = this.files; for(let i = 0; i < fileList.length; i++) { var file = fileList[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } var img = document.createElement("img"); img.file = file; drop.appendChild(img); var reader = new FileReader(); reader.onload = ( function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); reader.addEventListener("load", function (el) { const dropImgs = drop.querySelectorAll('img'); img.setAttribute('data-num', dropImgs.length); if( dropImgs.length >= max) { alert('上傳照片最多三張') upload.style.opacity = 0; } else { upload.style.opacity = 1; }; function addOverEvent(el) { el.stopPropagation(); el.preventDefault(); [].forEach.call(dropImgs, (elem) => { if (elem !== el.target) elem.classList.remove('over') }); el.target.classList.add('over'); }; [].forEach.call(dropImgs, (elem) => { elem.addEventListener('dragstart', startEvent, false); elem.addEventListener('dragenter', enterEvent, false); elem.addEventListener('dragover', overEvent, false); elem.addEventListener('dragleave', leaveEvent, false); elem.addEventListener('dragend', endEvent, false); elem.addEventListener('drop', dropEvent, false); elem.addEventListener('click', addOverEvent, false); }) }) }
};
function deleteEvent(el) { const over = document.querySelector('.over'); const dropImgs = drop.querySelectorAll('img'); let overfiles = 0; if ( over ) { const overDataSet = over.dataset.num; over.remove() }; // console.log(over.classList.contains('over')); [].forEach.call((dropImgs), images => { // console.log(images.classList.contains('over')) if( !images.classList.contains('over') === true ) { overfiles++; if( overfiles <= 3 ) { upload.style.opacity = 1; } } }) // console.log(dropImgs) return dropImgs;
}
upload.addEventListener('change', imgPreview, false);
deletebtn.addEventListener('click', deleteEvent, false)
Drag and drop - Script Codes
Drag and drop - Script Codes
Home Page Home
Developer Anna
Username AnnaLiu
Uploaded December 01, 2022
Rating 3
Size 2,706 Kb
Views 12,144
Do you need developer help for Drag and drop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anna (AnnaLiu) Script Codes
Name
Canvas animate
Canvas bezia
Clock
Canvas rotate
Canvas arc
Canvas transition
Testing
Array
A Pen by Anna
Slider demo
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!