HTML5 새 속성 드래그 속성(소개)
- 青灯夜游앞으로
- 2018-10-11 16:21:254415검색
이 글에서는 HTML5의 새로운 속성 중 드래그 앤 드롭 속성에 대해 소개하겠습니다. 참고할 만한 가치가 있는 친구들이 참고하시면 좋겠습니다.
HTML5에 추가된 많은 새로운 속성:
o FileClassType 선언()Only 에는 한 가지 유형만 있습니다. .
o 새로운 구문 분석 순차 순서: 더 이상 SGML을 기반으로 하지 않습니다.
o새 요소: section, video, 진행률,nav, 미터, 시간, 따로, 캔버스, 명령, 데이터 목록, 세부 정보, 포함, figcaption,그림, 바닥글, 머리글, hgroup, keygen, 표시, 출력, rp, rt, 루비, 소스, 요약, wbr.
oInputNew classtype: date, email, urletc.
o새 속성: ping(a 및 area용) , charset(meta용) ), 비동기 ( script용).
o전역 속성: id, tabindex,peat.
o새로운 전역 속성: contenteditable, contextmenu, draggable, dropzone, hide, 맞춤법 검사.
o요소 제거: acronym, applet,basefont, big, center, dir, 글꼴, 프레임, 프레임셋, isindex, noframes, Strike,tt. 이제 HTML5의 새로운 속성 중 드래그 앤 드롭 속성을 소개하겠습니다. ㅋㅋㅋ Event.dataTransfer
Draggable 속성 : Gu이름 의미meaning, 드래그한 요소는 draggable=true로 설정해야 합니다. 그렇지 않으면 효과가 없습니다
<p draggable =’true’></p>DataTransfer 속성 및 class 종류 ㅋㅋㅋ
String파일
filelist
| 모스 커서
|
스트링 |
|
|||||||||||||||
mozItemCount |
서명되지 않은 긴 |
|
|||||||||||||||
|
Node |
| 유형 ||||||||||||||||
|
ondragstart 이벤트: 드래그 요소가 드래그되기 시작하면 이벤트가 트리거되고 이 이벤트는 드래그된 요소에 대해 작동합니다 . 온드라젠터 이벤트: 드래그 요소 가 viewmarker에 들어갈 때 요소가 트리거될 때 이벤트, 이 이벤트는 요소의 대상에 작용합니다. 온드래그오버 이벤트: 드래그 요소 가 eyemarker 요소 를 통과할 때 를 터치했을 때 의 이벤트, 이 이벤트는 대상 요소에 작용합니다. ondrop이벤트: 드래그 요소 가 동시에 대상 요소에서 마우스를 놓을 때 트리거되면 이 이벤트는 대상 요소에 작용합니다ondragend 이벤트: 드래그가 완료되면 가 트리거됩니다. 이벤트는 드래그된 요소에 대해 작동합니다. Event.preventDefault() 메소드 : 실행 방지 기본 이벤트 방법 등 PreventDefault는 ondrop에서 실행되어야 합니다. 그렇지 않으면 ondrop 이벤트가 트리거되지 않습니다. 또한, 다른 애플리케이션이나 파일, 특히 사진에서 무언가를 드래그하는 경우 기본 동작은 사진이나 관련 정보를 표시하는 것이며 실제로 드롭을 실행하지는 않습니다. 이때 문서의 ondragover 이벤트를 사용하여 Event. effectAllowed 속성: 드래그 효과, 값 가져오기:None, copy, copyLink, copyMove, link, linkMove , move, all, 초기화되지 않음(기본값) value meaning
事件触发顺序 ondragstart->ondragenter->ondragover->ondrop->ondragend Demo
box从右边拖到container中后，box在右边消失，container中添加了被拖拽的box。 右边的box是可排序的。
代码 <p> container </p> <p> </p><p>box-1</p> <p>box-2</p> <p>box-3</p> <p>box-4</p> <p>box-5</p> <p>box-6</p> <p>box-7</p> <p></p> <script>
var container = document.getElementsByClassName('container')[0];
var boxList = document.getElementsByClassName('boxList')[0];
var boxes = document.getElementsByClassName('box');
var listLength = boxes.length;
var targetDropEle=null;
(function () {
for(let i=0;i<listLength;i++){
boxes[i].ondragstart = function (ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setDragImage(ev.target, 0, 0);
ev.dataTransfer.setData("Text",i+1);
// dataTransfer.setData() 方法设置被拖数据的数据类型和值
// 数据类型是text，值是可拖动元素的innerHTML
targetDropEle = ev.target;
showAlter("ondragstart")
}
boxes[i].ondragend = function(ev) {
/*拖拽结束*/
ev.dataTransfer.clearData("Text");
targetDropEle = null;
showAlter("ondragend");
return false
};
boxes[i].ondragover = function () {
/*拖拽元素进入目标元素上移动*/
showAlter("ondragover");
event.preventDefault();
// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式;
}
boxes[i].ondragenter = function (ev) {
showAlter("ondragenter");
/*拖拽元素进入目标元素*/
}
boxes[i].ondrop = function (ev) {
/*拖拽元素进入目标元素头上，同时鼠标松开的时候*/
if(targetDropEle){
ev.preventDefault();
// 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
showAlter("ondrop");
ev.target.parentNode.insertBefore(targetDropEle,ev.target);
}
}
}
container.ondragover = function () {
/*拖拽元素进入目标元素上移动*/
showAlter("ondragover");
event.preventDefault();
// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式;
}
container.ondragenter = function (ev) {
showAlter("ondragenter");
/*拖拽元素进入目标元素*/
ev.target.style.opacity=0.5
}
container.ondrop = function (ev) {
/*拖拽元素进入目标元素头上，同时鼠标松开的时候*/
if(targetDropEle){
ev.preventDefault();
// 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
showAlter("ondrop");
// let number=ev.dataTransfer.getData("Text");
// if(number%2==0){
// return false;
// }
targetDropEle.parentNode.removeChild(targetDropEle);
container.appendChild(targetDropEle);
ev.target.style.opacity=1;
}
}
})();
function showAlter(content) {
setTimeout(function () {
document.getElementsByClassName('alert')[0].style.display="none"
},1000)
document.getElementsByClassName('alert')[0].innerHTML=content;
document.getElementsByClassName('alert')[0].style.display="block"
console.log(content);
}
</script>
还看到了一些html5的新属性就写在文章末尾吧 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.userInfo{
color: red;
}
.userInfo :hover{
color: transparent;
}
.userInfo:hover:after{
content: attr(data-hover-response);
color: black;
}
</style>
</head>
<body>
<!--data-***-->
<!--符合html5的规范-->
<!--js提供dataset方法-->
<!--css提供attr()方法-->
<!--<div userid = "6666" name="hugo"></div>-->
<div id ="user" data-userid="6666" data-hover-response="see I am changed" data-name="hugo" data-date-of-birthday>Fiona</div>
<!--datalist-->
browsers:<input list="browsers">
<datalist id="browsers">
<option value="chrome"></option>
<option value="fireFox"></option>
<option value="IE"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
<!--download属性：表明资源是让用户下载的而不是立即显示的。download的值就是文件名-->
<div style="margin-top: 20px">
<a href="1-160F6160T7.jpg" download="kitty.jpg"> download with download </a>
<a href="1-160F6160T7.jpg" style="margin-left: 20px"> download without download </a>
</div>
<!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地-->
<!--autofocus 页面加载时自动获得焦点，仅对于input, button, textarea等表单元素有效，多个autofocus存在时候，作用与第一个-->
<div style="margin-top: 20px">
<input>
<button autofocus="autofocus">click me</button>
<textarea autofocus="autofocus"></textarea>
<input autofocus="autofocus">
</div>
<!--placeholder-->
<div style="margin-top: 20px">
<input placeholder="use rname">
</div>
<!--menu目前chrome safari不支持-->
<div>
<menu type="context" id="mymenu">
<menuitem label="fresh post"></menuitem>
<menuitem label="skip to moment"></menuitem>
<menuitem label="share to...">
<menuitem label="facebook"></menuitem>
<menuitem label="twitter"></menuitem>
</menuitem>
</menu>
</div>
</body>
<script>
var user = document.getElementById("user");
//驼峰的写法
user.dataset.dateOfBirthday = "1992-04-04"
user.dataset.englishName = "Fiona"
// <!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地-->
var blob = new Blob(["hello world I am content "]);//文本内容
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello world.txt";
a.textContent = "download hello world"
document.body.appendChild(a)
</script>
</html>总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！ 相关推荐： |
 "153924587265239HTML5 새 속성 드래그 속성(소개)")
위 내용은 HTML5 새 속성 드래그 속성(소개)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!