html 드래그 드래그 이벤트
- 韦小宝원래의
- 2018-05-18 15:39:463489검색
html에서는 이벤트 처리가 js로 이루어지며, js과 CSS는 분리될 수 없습니다. 다음은 js에서 드래그 앤 드롭 이벤트를 처리하는 예입니다.
드래그 이벤트는 두 부분으로 나누어집니다. 하나는 드래그 대상(예: 드래그 대상)을 처리하는 부분이고, 다른 하나는 드래그 대상(예: 릴리스 대상)을 처리하는 부분입니다.
드래그 대상(소스 요소)에서 이벤트 트리거:
ondragstart - 사용자가 요소 드래그를 시작할 때 트리거됨
ondrag - 요소가 드래그될 때 트리거됨
ondragend - 사용자가 드래그를 완료한 후 요소 Trigger
대상을 놓을 때 트리거되는 이벤트:
ondragenter - 이 이벤트는 마우스로 드래그한 객체가 해당 컨테이너의 범위에 들어갈 때 트리거됩니다.
Ondragover - 드래그된 객체가 다른 객체의 컨테이너 범위 내에 있을 때 object 이 이벤트는 드래그할 때 트리거됩니다.
ondragleave - 이 이벤트는 마우스로 드래그한 객체가 컨테이너 범위를 벗어날 때 트리거됩니다.
ondrop - 드래그 프로세스 중에 마우스 버튼을 놓을 때 이 이벤트가 트리거됩니다.
구현 코드 다음과 같습니다: box1과 목록을 서로 드래그할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{width: 200px;height: 250px;border:2px solid red;}
#lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;}
li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;}
</style>
<script>
window.onload=function () {
var box1=document.getElementById("box1");
var lists=document.getElementById("lists");
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].draggable=true;
lis[i].flag=false;
//1、拖拽开始
lis[i].ondragstart=function () {
this.flag=true;
}
//2、拖拽移动
two.ondrag=function () {
}
//3、拖拽结束
lis[i].ondragend=function () {
this.flag=false;
}
}
//投放区事件
//1、进入投放区
box1.ondragenter=function (e) {
e.preventDefault();
}
//2、在投放区内移动
box1.ondragover=function (e) {
e.preventDefault();
}
//3、离开投放区
box1.ondragleave=function (e) {
e.preventDefault();
}
//4、完成投放 此时可以在投放区内做处理
box1.ondrop=function (e) {
e.preventDefault();
for(var i=0;i<lis.length;i++){
if(lis[i].flag){
box1.appendChild(lis[i]);
}
}
}
lists.ondragenter=function (e) {
e.preventDefault();
}
lists.ondragover=function (e) {
e.preventDefault();
}
lists.ondragleave=function (e) {
e.preventDefault();
}
lists.ondrop=function (e) {
e.preventDefault();
for(var i=0;i<lis.length;i++){
if(lis[i].flag){
lists.appendChild(lis[i]);
}
}
}
}
</script>
</head>
<body>
<p id="box1"></p>
<ul id="lists">
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
</ul>
</body>
</html>
그중 getElementsByTagName() 메소드는 지정된 태그 이름을 가진 객체 컬렉션을 반환할 수 있습니다.
e.preventDefault()는 시스템의 기본 드래그 이벤트를 방지하는 것입니다.
appendChild()는 지정된 컨트롤에 컨트롤을 추가하는 것입니다.
e.preventDefault();
위 내용은 모두 html 드래그 이벤트 내용인데, 모두에게 도움이 되었으면 좋겠습니다.
관련 권장 사항:
JS와 html을 사용하여 간단한 스케치패드 코드 만들기
위 내용은 html 드래그 드래그 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!