HTML5에서 드래그 앤 드롭을 구현하기 위한 예제 코드 공유
- 零下一度원래의
- 2017-05-04 15:36:471988검색
html5에서는 API인터페이스를 지원합니다. 이 기능을 통해 브라우저와 다른 애플리케이션 간에 데이터를 드래그 앤 드롭할 수 있습니다. 이 작업을 수행하려면 다음 두 단계
를 거쳐야 합니다. (1) 드래그 앤 드롭하려는 객체 의 드래그 가능한 속성 을 true로 설정합니다. 이런 방법으로 태그를 드래그 앤 드롭할 수 있습니다. 또한 img 태그와 a 태그를 true로 지정해야 하며 기본적으로 드래그 앤 드롭이 허용됩니다.
(2) 드래그 앤 드롭과 관련된 이벤트 처리 코드를 작성합니다. 일반적으로 사용되는 재생 이벤트는 다음과 같습니다.
dragstart는 드래그 앤 드롭 작업을 시작합니다.
드래그 드래그 앤 드롭 프로세스 중에. ,
dragenter is 드래그된 라벨이 이 라벨의 범위에 들어가기 시작합니다
dragover 드래그된 라벨이 이 라벨의 범위 내에서 이동하고 있습니다
dragleave 드래그된 라벨이 이 라벨의 범위를 벗어납니다
drop 거기 다른 라벨이 드래그되고 있는지 이 태그에 넣으세요
dragend 드래그 앤 드롭 작업이 종료됩니다
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init()
{
// (1) 拖放开始
source.addEventListener("dragstart", function(ev)
{
//(1) 向dataTransfer对象追加数据
var dt = ev.dataTransfer;
dt.effectAllowed = 'all';
//(2) 拖动元素为dt.setData("text/plain", this.id);
dt.setData("text/plain", "你好");
}, false);
// (3) dragend：拖放结束
dest.addEventListener("dragend", function(ev)
{
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
}, false);
// (4) drop:被拖放
dest.addEventListener("drop", function(ev)
{
// 从DataTransfer对象那里取得数据
var dt = ev.dataTransfer;
//(5) 不执行默认处理（拒绝被拖放）
ev.preventDefault();
//停止事件传播
ev.stopPropagation();
}, false);
}
</script>
</head>
<body onload="init()">
<h5>请拖放</h5>
</html> 위 코드에서는 페이지가 로드될 때 inint() 이벤트가 자동으로 트리거됩니다. . 이 이벤트에는 끌기 시작, 끌기 및 놓기, 끌기 종료의 세 가지 기능이 포함됩니다. 브라우저에서 웹페이지를 열고 마우스를 드래그하여 웹페이지에 저녁 사진을 표시하면 웹페이지에 필요한 콘텐츠가 자동으로 로드됩니다.
[관련 추천]
위 내용은 HTML5에서 드래그 앤 드롭을 구현하기 위한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!