HTML5基础知识 - JavaScript API - 图文拖放

Drag and Drop of Image and selected text. 使用了dragstart、dragend、dragenter、dragleave、drop事件。

drag

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1415
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

dragZone.addEventListener('dragend', function(event) {
        if (event.target.className) { // img case
            event.target.style.border = "4px solid #888";
        } else { // text case
            event.target.parentNode.style.border = "4px solid #888";
        }
        return true;
    }, true);

dropZone.addEventListener('dragenter', function(event) {
        if (event.preventDefault) event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';
        this.className = 'hovering';
        return false;
    }, false);

dropZone.addEventListener('dragover', function(event) {
        if (event.preventDefault) event.preventDefault(); // allows us to drop
        event.dataTransfer.dropEffect = 'copy';
        return false;
    }, false);

dropZone.addEventListener('dragleave', function(event) {
        if (event.preventDefault) event.preventDefault(); // allows us to drop
        this.className = '';
        return false;
    }, false);

dropZone.addEventListener('drop', function(event) {
 if (event.preventDefault) event.preventDefault();
 var imgPassed = null;
 var dropdata = document.querySelector('#drop-data');
 var types = event.dataTransfer.types;
 document.querySelector('#drop-data').textContent = '';
 this.innerHTML = '';
 for (var i = 0; i < types.length; i++) {
 if (types[i] == 'Files') {
 var files = event.dataTransfer.files;
 for (var j = 0; j < files.length; j++) {
 dropdata.textContent += 'File Name: ' + files[j].fileName;
 dropdata.textContent += 'File Size: ' + files[j].fileSize;
 }
 } else {
 if (typeof event.dataTransfer.getData(types[i]) !== 'undefined') {
 dropdata.innerHTML += '' + types[i] + ': ' + event.dataTransfer.getData(types[i]).replace(/</g, '<') + '';
 }
 }

if (types[i] == 'text/uri-list') {
                imgPassed = event.dataTransfer.getData('text/uri-list');
            }
        }

if (imgPassed) {
            var cEl = document.createElement('canvas');
            cEl.width = 200;
            cEl.height = 100;
            var ctx = cEl.getContext('2d');
            var img_buffer = document.createElement('img');
            img_buffer.src = imgPassed;
            img_buffer.style.display = 'none';
            document.body.appendChild(img_buffer); // this line only needed in safari
            img_buffer.onload = function() {
                ctx.drawImage(img_buffer, 0, 0, 100, 100);
            }
            this.appendChild(cEl);
        } else {
            if (event.dataTransfer.getData('text')) {
                this.innerHTML = event.dataTransfer.getData('text');
            } else if (event.dataTransfer.getData('text/plain')) {
                this.innerHTML = event.dataTransfer.getData('text/plain');
            }
        }
        return false;
    }, false);
})();

编译

CSS

HTML

Drag and Drop of Image and selected text. 使用了dragstart、dragend、dragenter、dragleave、drop事件。

drag

编辑器支持Emmet

快捷键

Drag and Drop of Image and selected text. 使用了dragstart、dragend、dragenter、dragleave、drop事件。

drag

Packery.js+Draggabilly.js功能演示 - 可拖拉的方块拼盘

HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：