Arrastar e Soltar HTML 5
Copie o código abaixo e cole no <body> da sua página de testes.
<section id="wrapper">
<header>
<h1>Arrastar e Soltar</h1>
</header>
<style type="text/css">
li {
list-style: none;
}
li a {
text-decoration: none;
color: #000;
margin: 10px;
width: 150px;
border: 3px dashed #999;
background: #eee;
padding: 10px;
display: block;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
li a:hover:after {
content: ' (drag me)';
}
ul {
margin-left: 200px;
min-height: 300px;
}
li.over {
border-color: #333;
background: #ccc;
}
#bin {
background: url(images/bin.jpg) top right no-repeat;
height: 250px;
width: 166px;
float: left;
border: 5px solid #000;
position: relative;
margin-top: 0;
}
#bin.over {
background: url(images/bin.jpg) top left no-repeat;
}
#bin p {
font-weight: bold;
text-align: center;
position: absolute;
bottom: 20px;
width: 166px;
font-size: 32px;
color: #fff;
text-shadow: #000 2px 2px 2px;
}
</style>
<article>
<p>Arrasta is itens da lista e solta no quadro.</p>
<div id="bin"></div>
<ul>
<li><a id="one" href="#">um</a></li>
<li><a href="#" id="two">dois</a></li>
<li><a href="#" id="three">três</a></li>
<li><a href="#" id="four">Quatro</a></li>
<li><a href="#" id="five">Cinco</a></li>
</ul>
</article>
<script>
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
var yum = document.createElement('p');
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;
var links = document.querySelectorAll('li > a'), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];
el.setAttribute('draggable', 'true');
addEvent(el, 'dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
});
}
var bin = document.querySelector('#bin');
addEvent(bin, 'dragover', function (e) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
this.className = 'over';
e.dataTransfer.dropEffect = 'copy';
return false;
});
// to get IE to work
addEvent(bin, 'dragenter', function (e) {
this.className = 'over';
return false;
});
addEvent(bin, 'dragleave', function () {
this.className = '';
});
addEvent(bin, 'drop', function (e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
var y = yum.cloneNode(true);
bin.appendChild(y);
setTimeout(function () {
var t = setInterval(function () {
if (y.style.opacity <= 0) {
if (msie) { // don't bother with the animation
y.style.display = 'none';
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);
return false;
});
</script>
</section>
<section id="wrapper">
<header>
<h1>Arrastar e Soltar</h1>
</header>
<style type="text/css">
li {
list-style: none;
}
li a {
text-decoration: none;
color: #000;
margin: 10px;
width: 150px;
border: 3px dashed #999;
background: #eee;
padding: 10px;
display: block;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
li a:hover:after {
content: ' (drag me)';
}
ul {
margin-left: 200px;
min-height: 300px;
}
li.over {
border-color: #333;
background: #ccc;
}
#bin {
background: url(images/bin.jpg) top right no-repeat;
height: 250px;
width: 166px;
float: left;
border: 5px solid #000;
position: relative;
margin-top: 0;
}
#bin.over {
background: url(images/bin.jpg) top left no-repeat;
}
#bin p {
font-weight: bold;
text-align: center;
position: absolute;
bottom: 20px;
width: 166px;
font-size: 32px;
color: #fff;
text-shadow: #000 2px 2px 2px;
}
</style>
<article>
<p>Arrasta is itens da lista e solta no quadro.</p>
<div id="bin"></div>
<ul>
<li><a id="one" href="#">um</a></li>
<li><a href="#" id="two">dois</a></li>
<li><a href="#" id="three">três</a></li>
<li><a href="#" id="four">Quatro</a></li>
<li><a href="#" id="five">Cinco</a></li>
</ul>
</article>
<script>
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
var yum = document.createElement('p');
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;
var links = document.querySelectorAll('li > a'), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];
el.setAttribute('draggable', 'true');
addEvent(el, 'dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
});
}
var bin = document.querySelector('#bin');
addEvent(bin, 'dragover', function (e) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
this.className = 'over';
e.dataTransfer.dropEffect = 'copy';
return false;
});
// to get IE to work
addEvent(bin, 'dragenter', function (e) {
this.className = 'over';
return false;
});
addEvent(bin, 'dragleave', function () {
this.className = '';
});
addEvent(bin, 'drop', function (e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
var y = yum.cloneNode(true);
bin.appendChild(y);
setTimeout(function () {
var t = setInterval(function () {
if (y.style.opacity <= 0) {
if (msie) { // don't bother with the animation
y.style.display = 'none';
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);
return false;
});
</script>
</section>
Não funfou :S
ResponderExcluir