Drag and drop - тащи и бросай
Эффект перемещения элемента списка в корзину ввиде картинки.
Подключаем jаvascript файл в хедере и CSS стили:
<script src="drag_files/h5utils.js"></script>HTML
<div id="bin"></div>
<ul>
<li><a draggable="true" id="one" href="#">Один</a></li>
<li><a draggable="true" href="#" id="two">Два</a></li>
<li><a draggable="true" href="#" id="three">Три</a></li>
<li><a draggable="true" href="#" id="four">Четыре</a></li>
<li><a draggable="true" href="#" id="five">Пять</a></li>
</ul>JS
Вставляем в конце body код:
<script type="text/jаvascript">
var eat = ['смыто', 'удален', 'упс', 'ок'];
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>Ссылки
