> 웹 프론트엔드 > H5 튜토리얼 > HTML5에서는 드래그된 데이터를 드래그할 때 dropzone 속성을 복사, 이동 또는 링크할지 여부를 지정합니다.

HTML5에서는 드래그된 데이터를 드래그할 때 dropzone 속성을 복사, 이동 또는 링크할지 여부를 지정합니다.

黄舟
풀어 주다: 2017-11-03 11:06:39
원래의
2041명이 탐색했습니다.

드래그 데이터는 드래그된 데이터의 복사본을 생성합니다.

<div dropzone="copy"></div>
로그인 후 복사

브라우저 지원

현재 모든 주요 브라우저는 드롭존 속성을 지원하지 않습니다.

정의 및 사용법

dropzone 속성은 요소에 데이터를 드래그할 때 드래그한 데이터를 복사, 이동 또는 링크할지 여부를 지정합니다.

HTML 4.01과 HTML5의 차이점

dropzone 속성은 HTML5의 새로운 기능입니다.

Syntax

<element dropzone="copy|move|link">
로그인 후 복사

속성 값

ValueDescription
copy드래그 데이터는 드래그된 데이터의 복사본을 생성합니다.
move 데이터를 드래그하면 드래그된 데이터가 새로운 위치로 이동됩니다.
link데이터를 드래그하면 원본 데이터에 대한 링크가 생성됩니다.

dropzone을 사용하는 일반적인 방법은 클래스 속성

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>
로그인 후 복사
<script>var myDropzone = new Dropzone("div#myId", { url: "/file/post"});</script>
로그인 후 복사

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){
                //删除文件时触发的方法
                 });
            });
        }

    });
로그인 후 복사


에 dropzone을 포함하는 양식 요소를 만드는 것입니다.

위 내용은 HTML5에서는 드래그된 데이터를 드래그할 때 dropzone 속성을 복사, 이동 또는 링크할지 여부를 지정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿