1.ドラッグを設定する
picture要素にはドラッグアンドドロップ属性があり、他の要素ではドラッグ可能な属性を設定できます。
<div draggable="true"></div>要素をドラッグするように設定すると、ドラッグを確認できます。
ドラッグが設定されていない場合、picture要素以外の他の要素はドラッグできません。
1.1ドラッグアンドドロップイベント
- ondragstar：ドラッグの前に出発します。イベントは1回だけトリガーされます。
- ondrag：ドラッグの前に、ドラッグの最後の間にトリガーがトリガーされ、イベントが継続的にトリガーされます、
- ondragend：ドラッグの終了によってトリガーされ、イベントは1回だけトリガーされます。
let box = document.querySelector('.box')
box.ondragstart = function (e) {
console.log('拖拽开始')
}
box.ondrag = function (e) {
console.log('拖拽ing.......')
}
box.ondragend = function (e) {
console.log('拖拽结束')
}印刷された結果：
1.2ターゲット要素のドラッグイベント
- ondragenter：トリガーするターゲット要素を入力してください
- ondragover：ターゲット要素に入るときにトリガーします
- ondragleave：ターゲット要素を離れるときにトリガーします
- ondrop：ターゲット要素上でマウスを離します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
float: left;
width: 300px;
height: 400px;
background-color: skyblue;
font-size:20px;
color:purple;
text-align: center;
line-height:400px;
}
.box {
float: right;
width: 150px;
height: 150px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<!-- <img src="https://img9.doubanio.com/view/photo/l/public/p2492913246.webp" width="200"> -->
<div class="wrap">把元素移入这里</div>
<script>
let wrap = document.querySelector('.wrap')
let box = document.querySelector(".box");
//被拖拽元素对象事件
// dragstart 拖拽开始时触发,只触发一次
box.ondragstart = function () {
this.style.background = 'blue';
}
// drag拖拽触发的事件,连续触发,只要鼠标不松开会一直触发
box.ondrag = function () {
this.style.background = 'yellow';
}
// dragend 拖拽结束时,触发的事件,只要鼠标一松开就触发
box.ondragend = function () {
this.style.background = 'pink';
}
//拖拽元素被拖拽到的对象事件
//进入目标元素触发
wrap.ondragenter = function () {
this.innerHTML = '元素进入了'
}
//离开目标元素触发
wrap.ondragleave = function () {
this.innerHTML = '讨厌,谁让你离开的'
}
//在目标元素中移动触发
wrap.ondragover = function () {
this.innerHTML = '元素移动了'
return false;
}
//在目标元素上释放鼠标触发
wrap.ondrop = function () {
this.innerHTML = '鼠标松开了'
}
</script>
</body>
</html>
1.2 dataTransferオブジェクト
dataTransferは、ドラッグイベントオブジェクトのプロパティです。
1.setData（）：データのキーと値を設定します（文字列でなければなりません）
2.getData（）：データを取得し、キー値に従って、対応する値を取得します
let box = document.querySelector(".box");
let wrap = document.querySelector(".wrap");
//datatransfer 拖拽对象的事件属性
box.ondragstart = function (e) {
this.style.background = 'pink';
e.dataTransfer.setData('key', this.className);
// 火狐必须加上这一行代码才能触发drag和dragend事件
}
wrap.ondragover = function () {
console.log(1)
return false
}
// 设置的key在这里可以使用
wrap.ondrop = function (e) {
this.style.background = 'skyblue';
//获取box元素
let key =document.querySelector("."+ e.dataTransfer.getData("key"));
// console.log(key);
//删除box
document.body.removeChild(key);
}要素は移動後に削除されます
3.effectAllowed：カーソルスタイルを設定します（none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized）
box.ondragstart = function (e) {
e.dataTransfer.effectAllowed = 'link';
}4.files：外部にドラッグされたファイルを取得し、filesListリストを返します。filesの下には、ファイルタイプを返すtype属性があります。
wrap.ondrop = function (e) {
let a = e.dataTransfer;
console.log(a.files)
return false;
}ファイルをドラッグした後、印刷結果は次のようになります（画像のサイズ、タイプ、および最終変更時刻が表示されます）。
2.ファイル情報を読み取る
FileReaderオブジェクトを介してローカルに保存されているファイル情報を読み取り、Fileオブジェクトを使用して読み取るファイルデータを指定できます。
2.1 FileReaderがファイル情報を読み取る（ドラッグアンドドロップを使用してファイル情報を読み取る）
readAsDataURLパラメータは、読み取るファイルオブジェクトです。
onloadは、ファイルの読み取りが正常に完了したときにこのイベントをトリガーします
this。result読み取ったファイルデータを取得します。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 100px;
margin: 20px auto;
border-radius: 5px;
background-color: #ccc;
font-size: 18px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 100px;
}
.container {
width: 800px;
height: 400px;
margin: 20px auto;
border: 2px solid skyblue;
}
.container>img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">把图片拖至这里</div>
<!-- 用来展示已经拖入的图片 -->
<div class="container"></div>
<script>
//获取元素
let box = document.querySelector('.box');
let container = document.querySelector(".container");
box.ondragover = function (ev) {
//阻止默认事件
ev.preventDefault();
//阻止事件冒泡
ev.stopPropagation();
return false;
}
box.ondrop = function (ev) {
ev.preventDefault()
ev.stopPropagation()
//获取文件信息
console.log(ev.dataTransfer.files)
let file = ev.dataTransfer.files[0];
//创建读取文件的对象
let oFiles = new FileReader();
console.log(oFiles)
//获取文件的URL地址
oFiles.readAsDataURL(file);
//文件信息读取完成之后会触发onload 事件
oFiles.onload = function () {
let src = this.result;
// console.log(src);
if (file.type.includes('image')) {
//创建图片标签
let img = new Image();
//设置渲染图片的URL地址
img.src = src;
//将图片作为contianer的子元素渲染到页面中
container.appendChild(img);
}
}
return false;
}
</script>
</body>
</html>
2.2フォームフィールドを使用してファイル情報を読み取る
formフィールドから返されるDOM要素にはfiles属性があり、この属性の値は、選択したファイルの情報を格納するFilesオブジェクトです。
ファイルを選択したら、onchangeイベントを開始します。
コードの一部：
//表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息
var file = document.querySelector('#file');
file.onchange = function() {
console.dir(this);
}
フォームを使用してファイル情報を読み取ります。
<input type="file" name="file" multiple />
<script>
var file = document.querySelector("input")
file.addEventListener("change",function(){
console.log(this.files)
},false)
</script>ケース
HTMLコード：
<input type="file" id='file' multiple/>
<div class="container"></div>JavaScriptコード
//获取元素
let container = document.querySelector(".container");
let file = document.querySelector('#file');
file.onchange = function () {
let files = this.files;
let length = files.length;
if(length){
for(let i = 0; i < length; i++){
Render(files[i])
}
}
}
function Render(file) {
//创建读取文件的对象
let oFile = new FileReader();
// 通过读取文件对象的readAsDataURL 方法读取指定的文件
oFile.readAsDataURL(file);
//文件信息读取完毕触发onload事件
oFile.onload = function() {
let src = this.result;
//创建图片标签
let img = new Image();
img.src = src;
container.appendChild(img);
}
}最終的な効果は、同時に複数の写真をアップロードできることです
