Home > Web Front-end > H5 Tutorial > body text

HTML5 specifies whether to copy, move or link the attribute dropzone when dragging the dragged data.

黄舟
Release: 2017-11-03 11:06:39
Original
2023 people have browsed it

Example

Drag data will produce a copy of the dragged data:

<div dropzone="copy"></div>
Copy after login

Browser support

Currently all major browsers do not support dropzone Attributes.

Definition and Usage

The dropzone attribute specifies whether to copy, move or link the dragged data when dragging data on an element.

Differences between HTML 4.01 and HTML5

The dropzone attribute is new in HTML5.

Syntax

<element dropzone="copy|move|link">
Copy after login

Attribute value

ValueDescription
copyDrag data will produce a copy of the dragged data.
moveDrag data will cause the dragged data to be moved to a new location.
#link Dragging the data will generate a link to the original data.

The typical way to use dropzone is to create a form element that contains dropzone in the class attribute

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>
Copy after login
<script>var myDropzone = new Dropzone("div#myId", { url: "/file/post"});</script>
Copy after login

Case

$("#dropz").dropzone({
        url: "index.php", //必须填写
        method:"post",  //也可用put
        paramName:"Filedata", //默认为file
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 20, //MB
        acceptedFiles: ".jpg,.gif,.png", //上传的类型
        previewsContainer:"#adds", //显示的容器
        parallelUploads: 3,
        dictMaxFilesExceeded: "您最多只能上传10个文件!",
        dictResponseError: &#39;文件上传失败!&#39;,
        dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        previewTemplate: document.querySelector(&#39;#preview-template&#39;).innerHTML,//设置显示模板
        init:function(){
            this.on("addedfile", function(file) { 
            //上传文件时触发的事件
            });            this.on("queuecomplete",function(file) {
                //上传完成后触发的方法
            });            this.on("removedfile",function(file){
                //删除文件时触发的方法
                 });
            });
        }

    });
Copy after login


The above is the detailed content of HTML5 specifies whether to copy, move or link the attribute dropzone when dragging the dragged data.. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!