走进HTML5开发（6）——图片的拖放

     在html5之前，网页当中实现拖拽要借助到js中的(onmousedown+onmousemove)，现在html5内部就支持了拖拽的功能，结合js调用脚本监听拖曳的事件，完成一些拖放的操作。同时，拖放功能还可以与Html5的文件操作相结合，实现拖曳文件上传。

（浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 ）

   下面是一个图片拖拽排序的实例，拖动第一个图片，会变成透明，松开鼠标后会调换位置，完成一次排序

                                 拖曳前                                                                            拖曳后

本例来自于：《HTML5网页开发实例详解》9.4

<script>
    (function () {
        var slice = Array.prototype.slice,
            list = slice.call(document.getElementsByTagName('div'), 0), // 商品元素列表数组
            move_item;                                                  // 当前拖动元素
        list.forEach(function (item) {                                  // 循环数组，监听元素事件
            item.addEventListener('dragstart', function (e) {           // 拖动开始触发
                e.dataTransfer.effectAllowed = 'move';                  // 设置拖动允许的事件行为
                e.dataTransfer.setData('html', e.target.innerHTML);     // 保存目标元素结构至拖拽数据中
                this.style.opacity = '0.4';
                this.classList.add('moving');
                move_item = item;                                       // 将目标元素保存在闭包变量中
            }, false);
            item.addEventListener('dragenter', function (e) {           // 拖入元素边界内触发
                e.target.classList.add('over');
            }, false);
            item.addEventListener('dragover', function (e) {            // 元素在目标元素上移动
                e.preventDefault();                                     // 阻止元素默认时间，保证drop被触发
                e.target.classList.add('over');
            }, false);
            item.addEventListener('dragleave', function (e) {           // 元素离开目标元素触发
                e.target.classList.remove('over');
            }, false);
            item.addEventListener('drop', function (e) {                // 拖拽元素放在目标元素内
                var target = e.target;
                if (move_item != target) {                              // 拖动元素与放置元不同
                    move_item.innerHTML = item.innerHTML;               // 将被拖放元素结构填充为放置元素
                    item.innerHTML = e.dataTransfer.getData('html');    // 设置拖放元素结构为被拖放元素
                };
            }, false);
            item.addEventListener('dragend', function (e) {             // 拖拽完毕后触发
                this.style.opacity = '1';
                list.forEach(function (item) {
                    item.classList.remove('moving');                    // 移除拖动样式
                });
            }, false);
        });
    })();
</script>