H 5ドラッグアップロード
27598 ワード
インテリジェントポイント
通常のドラッグ
火狐が引きずる
外部ファイルのドラッグ
:
draggable
draggable ：true
( ) :
ondragstart :
ondrag : 、 ，
ondragend :
( ) :
ondragenter :
ondragover : 、 ，
ondragleave :
ondrop :
!!!! ， ， ondragover
:
!!!!!!draggable='true' ====>
e.dataTransfer
setData() : key value( )
getData() : ， key ， value
effectAllowed : (none, copy, copyLink, copyMove, link, linkMove, move, all uninitialized)
setDragImage ： （ ， X， Y）
files： ， filesList
filesList type ，
: FileReader( )
readAsDataURL
onload
this. result 通常のドラッグ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Documenttitle>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {float: left; width: 200px; height: 200px; background: gray;}
#wrap {float: right; width: 300px; height: 400px; background: gray;}
style>
head>
<body>
<div id="box" draggable='true'>div>
<div id="wrap"> div>
<script type="text/javascript">
/*
draggable
draggable ：true
( ) :
ondragstart :
ondrag : 、 ，
ondragend :
( ) :
ondragenter :
ondragover : 、 ，
ondragleave :
ondrop :
!!!! ， ， ondragover
*/
var num = 0;
box.ondragstart = function(){
this.style.background = '#f60';
}
box.ondrag = function () {
box.innerHTML = num++;
}
box.ondragend = function(){
this.style.background = '#ccc';
}
wrap.ondragenter = function () {
this.innerHTML = ' , '
}
wrap.ondragover =function (e) {
var e = e || window.event;
e.preventDefault();
document.title = num++;
}
wrap.ondragleave = function () {
this.innerHTML = '';
}
wrap.ondrop = function (e) {
var e = e || window.event;
console.log(e.dataTransfer);
this.innerHTML = '';
alert(1);
}
script>
body>
html>
火狐が引きずる
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Documenttitle>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {float: left; width: 200px; height: 200px; line-height: 200px; background: #ccc; text-align: center; color: #fff;}
ul {float: right; width: 100px;}
li {height:35px; border:1px dashed #000;}
style>
head>
<body>
<div id="box"> div>
<ul>
<li draggable='true'>1li>
<li draggable='true'>2li>
<li draggable='true'>3li>
<li draggable='true'>4li>
<li draggable='true'>5li>
ul>
<script type="text/javascript">
/*
!!!!!!draggable='true' ====>
e.dataTransfer
setData() : key value( )
getData() : ， key ， value
*/
var oUl = document.querySelector('ul');
var aLi = document.querySelectorAll('li');
for( var i=0;ifunction(e){
var e = e || event;
//console.log( e.dataTransfer );
e.dataTransfer.setData('index',this.index);
this.style.background = 'gray';
};
}
box.ondragover = function (e) {
var e = e || window.event;
e.preventDefault();
}
box.ondrop = function (e) {
var e = e || window.event;
console.log(e.dataTransfer.getData('index'));
oUl.removeChild(aLi[e.dataTransfer.getData('index')])
}
script>
body>
html>
外部ファイルのドラッグ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Documenttitle>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
#box {width: 200px; height: 200px; background: gray; line-height: 200px; text-align: center; color: #fff;}
img {width: 100px; height: 100px;}
style>
head>
<body>
<div id="box" >div>
<script type="text/javascript">
/*
effectAllowed : (none, copy, copyLink, copyMove, link, linkMove, move, all uninitialized)
setDragImage ： （ ， X， Y）
files： ， filesList
filesList type ，
: FileReader( )
readAsDataURL
onload
this. result
*/
box.ondragenter = function () {
this.innerHTML = ' ';
}
box.ondragover = function (e) {
var e = e || window.event;
e.preventDefault();
};
box.ondragleave = function (e) {
this.innerHTML = ' ';
}
box.ondrop = function (e) {
var e = e || window.event;
e.preventDefault();
console.log(e.dataTransfer);
var FileList = e.dataTransfer.files;
console.log(FileList);
// : FileReader
var File = new FileReader();
File.readAsDataURL(FileList[0]);
File.onload = function () {
console.log(this);
var oImg = document.createElement('img');
oImg.src = this.result;
document.body.appendChild(oImg);
}
}
script>
body>
html>