[소개] Dragable 속성 이전에 HTML5의 기본 드래그 앤 드롭에 대한 몇 가지 관련 지식을 소개했습니다. 오늘은 HTML5 드래그 앤 드롭의 또 다른 작은 것들을 소개하겠습니다. 더 이상 고민하지 말고 함께 살펴보겠습니다. 기본적으로 링크, 텍스트 및 이미지는
Dragable 속성
이전에 HTML5의 기본 드래그 앤 드롭에 대한 몇 가지 관련 지식을 소개했습니다. 오늘은 HTML5 드래그 앤 드롭의 또 다른 작은 것들을 소개하겠습니다. 더 이상 고민하지 말고 함께 살펴보겠습니다.
기본적으로 링크, 텍스트, 이미지는 드래그가 가능하며, 코드를 작성하지 않고도 드래그할 수 있습니다. 다른 요소 태그를 드래그할 수 있게 하려면 HTML5만 가능합니다. HTML5는 모든 HTML 요소에 대해 요소를 끌 수 있는지 여부를 나타내는 dragable 속성을 지정합니다. 링크 및 이미지 태그에서는 dragable 속성이 자동으로 true로 설정되며, 다른 요소의 dragable 속성은 기본값이 false입니다.
dragable 속성을 지원하는 브라우저는 Firefox 4+, Chrome, IE 10+ 및 Safari 5+입니다. Opera 11.5 및 이전 버전은 HTML5 드래그 앤 드롭 기능을 지원하지 않습니다. 또한 Firefox에서 드래그 가능한 속성을 지원하려면 ondragstart 이벤트 핸들러를 추가하고 dataTransfer 객체에 일부 정보를 저장해야 합니다. IE 9 이하에서는 mousedown 이벤트 핸들러를 통해 dragDrop() 메서드를 호출하면 모든 요소를 드래그할 수 있게 되었습니다. Safari 4 이하 버전에서는 요소를 드래그하기 전에 해당 요소에 대해 CSS 스타일 -khtml-user-drag:를 추가로 설정해야 합니다.
HTML5 다른 멤버 드래그 앤 드롭
dataTransfer 객체의 일부 속성은 이전에 소개되었지만 포괄적이지 않습니다. 아래의 일부 메서드와 속성은 누락되었을 수 있습니다.
addElement(element): 드래그 작업을 위한 요소를 추가합니다. 이 요소를 추가하면 데이터(즉, 드래그 소스 역할을 하고 콜백에 응답하는 개체 추가)에만 영향을 미치며 드래그 작업 중 페이지 요소의 모양에는 영향을 주지 않습니다. 이 블로그를 작성하는 시점에서는 Firefox 3.5+에서만 이 방법을 구현합니다.
clearData(format): 특정 형식으로 저장된 데이터를 지웁니다. 이 방법을 구현하는 브라우저에는 Firefox 3.5+, Safari 4+, IE 및 Safari 4+가 포함됩니다.
setDragImge(element, x, y): 드래그가 발생할 때 커서 아래에 표시될 이미지를 지정합니다. 이 메서드는 표시할 HTML 요소와 이미지에 있는 커서의 x 및 y 좌표라는 세 가지 매개 변수를 받습니다. 그 중 HTML 요소는 이미지일 수도 있고, 기타 요소일 수도 있습니다. 이미지인 경우 이미지가 표시되며, 다른 요소인 경우 렌더링된 요소가 표시됩니다. 지원되는 브라우저는 Safari 4+, Chrome 및 Firefox 3.5+입니다.
유형: 현재 저장된 데이터 유형입니다. 이는 "텍스트"와 같은 문자열 형식으로 데이터 유형을 저장하는 배열과 유사한 컬렉션입니다. 지원되는 브라우저는 Chrome, Firefox 3.5+ 및 IE 10+입니다.
몇 가지 이론적 지식을 이해한 후 이해를 심화하기 위해 작은 예를 들어보겠습니다.
드래그 가능한 속성 및 기타 멤버의 작은 예
HTML 코드
[html] view plaincopyprint?
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="false">c</li>
</ul>
<a href="http://www.baidu.com/">d</a>
<p id="p1"></p>로그인 후 복사
CSS 코드
[css] view plaincopyprint?
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}로그인 후 복사
로그인 후 복사
JavaScript 코드
[javascript] view plaincopyprint?
//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
//拖动不带链接的li，会起作用但不跳转链接
//拖动带连接的a，会起作用也跳转
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var op = document.getElementById('p1');
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'all';
ev.dataTransfer.setDragImage(this,0,0);
};
aLi[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
for(var i=0;i<aA.length;i++){
aA[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
ev.dataTransfer.effectAllowed = 'link';
};
aA[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
op.ondragenter = function(){ //相当于onmouseover
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmouseout
this.style.background = 'red';
};
op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
ev.dataTransfer.dropEffect = 'link'; //真对外部文件
};
op.ondrop = function(ev){ //释放鼠标的时候触发
this.style.background = 'red';
alert( ev.dataTransfer.getData('a') );
alert( ev.dataTransfer.types );
};
};로그인 후 복사
바탕 화면을 페이지로 드래그하는 간단한 예
HTML 코드
[javascript] view plaincopyprint?
//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
window.onload = function(){
var op = document.getElementById('p1');
op.ondragenter = function(){ //相当于onmouseover
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmouseout
this.style.background = 'red';
};
op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
ev.dataTransfer.dropEffect = 'link'; //真对外部文件
};
op.ondrop = function(ev){ //释放鼠标的时候触发
ev.preventDefault(); //阻止默认行为
this.style.background = 'red';
var oFR = new FileReader();
var list = ev.dataTransfer.files; //当前拖拽的那个文件(返回的一个文件列表)
//alert(list.length);
//type : 文件类型
//alert(list[0].type);
oFR.onload = function(){ //读取完成，触发事件
alert(this.result); // 读取到的信息
};
oFR.readAsDataURL(list[0]);
};
};로그인 후 복사
CSS 코드
[css] view plaincopyprint?
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}로그인 후 복사
로그인 후 복사
JavaScript 코드
[html] view plaincopyprint?
<p id="p1">梦龙小站</p>
로그인 후 복사
쓰레기 삭제의 작은 예
HTML 코드
[html] view plaincopyprint?
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>로그인 후 복사
CSS 코드
[css] view plaincopyprint?
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px; color:white;}로그인 후 복사
JavaScript 코드
[javascript] view plaincopyprint?
//dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var op = document.getElementById('p1');
var iNow = 0;
var targetLi = null;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){ //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('text',this.innerHTML); //存储一个键值对 : value值必须是字符串
targetLi = this;
};
aLi[i].ondragend = function(){ //拖拽结束触发
this.style.background = '';
};
}
op.ondragenter = function(){ //相当于onmouseover
this.style.background = 'green';
};
op.ondragleave = function(){ //相当于onmouseout
this.style.background = 'red';
};
op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
};
op.ondrop = function(ev){ //释放鼠标的时候触发
this.style.background = 'red';
var oText = ev.dataTransfer.getData('text');
if(targetLi){
targetLi.parentNode.removeChild(targetLi);
this.innerHTML = '删除的是:'+oText;
}
};
};로그인 후 복사
위 내용은 드래그 가능한 속성 및 기타 멤버에 대한 HTML5 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
