Skip to content

Instantly share code, notes, and snippets.

@luxiaojian

luxiaojian/index.html

Created May 7, 2015 12:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save luxiaojian/b86e7162201e17c6175f to your computer and use it in GitHub Desktop.
Save luxiaojian/b86e7162201e17c6175f to your computer and use it in GitHub Desktop.
Download ZIP
html5拖拽 // source http://jsbin.com/zowuzu
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5拖拽</title>
<style id="jsbin-css">
.clearfix:before,
.clearfix:after{
display: table;
content: '';
}
.clearfix:after{
clear: both;
*zoom: 1;
}
#drag-element li{
display: inline-block;
margin-right: 20px;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #00f;
color:#fff;
text-align: center;
}
#droptarget{
height: 100px;
padding: 50px;
border: 3px solid #eee;
text-align: center;
font-size: 24px;
}
.over {
background: #F7F7F7;
}
</style>
</head>
<body>
<div class="container clearfix">
<ul id="drag-element">
<li draggable="true">element 1</li>
<li draggable="true">element 2</li>
<li draggable="true">element 3</li>
<li draggable="true">element 4</li>
</ul>
<br/>
<div id="droptarget">drop here</div>
</div>
<script id="jsbin-javascript">
window.onload = function(){
var eledrags = document.querySelectorAll('#drag-element li');
var droptarget = document.querySelector("#droptarget");
var eledragged = null;
for(var i=0;i<eledrags.length;i++){
eledrags[i].addEventListener('dragstart',function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('Text',this.innerHTML);
eledragged = this;
//console.log('dragstart!');
});
eledrags[i].addEventListener('dragend',function(e){
eledragged = null;
//console.log('dragend!')
});
}
droptarget.addEventListener('dragover',function(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
e.dataTransfer.dropEffect = 'move';
//console.log('dropover!');
return false;
});
droptarget.addEventListener('dragenter',function(e){
this.className= "over";
//console.log('dropenter!');
});
droptarget.addEventListener('dragleave',function(e){
this.className= "";
//console.log('dropleave!');
});
droptarget.addEventListener('drop',function(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
this.className = "";
this.innerHTML = "Dropped" + e.dataTransfer.getData('Text');
document.querySelector("#drag-element").removeChild(eledragged);
//console.log('drop!');
return false;
});
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5拖拽</title>
</head>
<body>
<div class="container clearfix">
<ul id="drag-element">
<li draggable="true">element 1</li>
<li draggable="true">element 2</li>
<li draggable="true">element 3</li>
<li draggable="true">element 4</li>
</ul>
<br/>
<div id="droptarget">drop here</div>
</div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.clearfix:before,
.clearfix:after{
display: table;
content: '';
}
.clearfix:after{
clear: both;
*zoom: 1;
}
#drag-element li{
display: inline-block;
margin-right: 20px;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #00f;
color:#fff;
text-align: center;
}
#droptarget{
height: 100px;
padding: 50px;
border: 3px solid #eee;
text-align: center;
font-size: 24px;
}
.over {
background: #F7F7F7;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
window.onload = function(){
var eledrags = document.querySelectorAll('#drag-element li');
var droptarget = document.querySelector("#droptarget");
var eledragged = null;
for(var i=0;i<eledrags.length;i++){
eledrags[i].addEventListener('dragstart',function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('Text',this.innerHTML);
eledragged = this;
//console.log('dragstart!');
});
eledrags[i].addEventListener('dragend',function(e){
eledragged = null;
//console.log('dragend!')
});
}
droptarget.addEventListener('dragover',function(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
e.dataTransfer.dropEffect = 'move';
//console.log('dropover!');
return false;
});
droptarget.addEventListener('dragenter',function(e){
this.className= "over";
//console.log('dropenter!');
});
droptarget.addEventListener('dragleave',function(e){
this.className= "";
//console.log('dropleave!');
});
droptarget.addEventListener('drop',function(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
this.className = "";
this.innerHTML = "Dropped" + e.dataTransfer.getData('Text');
document.querySelector("#drag-element").removeChild(eledragged);
//console.log('drop!');
return false;
});
};</script></body>
</html>
Raw
jsbin.zowuzu.css
.clearfix:before,
.clearfix:after{
display: table;
content: '';
}
.clearfix:after{
clear: both;
*zoom: 1;
}
#drag-element li{
display: inline-block;
margin-right: 20px;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #00f;
color:#fff;
text-align: center;
}
#droptarget{
height: 100px;
padding: 50px;
border: 3px solid #eee;
text-align: center;
font-size: 24px;
}
.over {
background: #F7F7F7;
}
Raw
jsbin.zowuzu.js
window.onload = function(){
var eledrags = document.querySelectorAll('#drag-element li');
var droptarget = document.querySelector("#droptarget");
var eledragged = null;
for(var i=0;i<eledrags.length;i++){
eledrags[i].addEventListener('dragstart',function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('Text',this.innerHTML);
eledragged = this;
//console.log('dragstart!');
});
eledrags[i].addEventListener('dragend',function(e){
eledragged = null;
//console.log('dragend!')
});
}
droptarget.addEventListener('dragover',function(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
e.dataTransfer.dropEffect = 'move';
//console.log('dropover!');
return false;
});
droptarget.addEventListener('dragenter',function(e){
this.className= "over";
//console.log('dropenter!');
});
droptarget.addEventListener('dragleave',function(e){
this.className= "";
//console.log('dropleave!');
});
droptarget.addEventListener('drop',function(e){
if(e.preventDefault){
e.preventDefault();
}
if(e.stopPropagation){
e.stopPropagation();
}
this.className = "";
this.innerHTML = "Dropped" + e.dataTransfer.getData('Text');
document.querySelector("#drag-element").removeChild(eledragged);
//console.log('drop!');
return false;
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment