JavaScript HTML5에서 드래그 기능을 쉽게 구현하는 기술에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript HTML5에서 드래그 기능을 쉽게 구현하는 기술에 대한 자세한 설명

黄舟

풀어 주다： 2017-03-24 15:08:54

원래의

1142명이 탐색했습니다.

이 글에서는 드래그 기능을 쉽게 구현하기 위한 javascript html5를 위주로 자세하게 소개하고 있는데, 관심 있는 친구들은 참고할 수 있을 것입니다.

드래그 앤 드롭(드래그 앤 드롭)은 HTML5의 표준 구성 요소입니다. 아래에서는 드래그 객체가 되는 방법, 드래그 대상이 되는 방법, 드래그된 객체에 대한 이벤트를 설명합니다. 드래그 대상이 소유한 이벤트와 드래그 앤 드롭 개체 간에 정보를 전송하는 방법.

드래그된 개체가 소유한 이벤트

dragstart(객체를 드래그했을 때 트리거됨)
drag(dragstart 이벤트가 트리거된 후 트리거됨)
dragend(드래그 이벤트가 종료될 때 트리거됨)

드래그 대상에 속한 이벤트

dragenter(드래그된 요소가 드롭 대상에 들어갈 때 트리거됨)
dragover (드래그된 요소가 드롭 대상에서 이동할 때 트리거, 마우스 오버와 유사)
드롭(드래그된 요소가 드롭 대상에 배치될 때 트리거)

드래그 가능한 객체가 되는 방법

html에서는 기본적으로 img 요소를 드래그할 수 있으며 다른 요소는 드래그 가능하도록 설정해야 합니다. =참입니다.

<p draggable="true"></p>

로그인 후 복사

드래그 타겟이 되는 방법

HTML에서는 drapenter 및 drapover의 기본 동작을 비활성화하는 경우에만 요소가 기본적으로 드롭 타겟이 될 수 없습니다. 이벤트, 드래그 앤 드롭 대상이라고 부를 수 있습니다.

droptarget.addEventListener(&#39;dragenter&#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;dragover&#39;, function(event) {
  event.preventDefault();
});

로그인 후 복사

드래그 앤 드롭 개체 간에 정보를 전송하는 방법

이벤트에는 두 가지 공통 메서드 setData( ) 및 getData()는 각각 드래그 앤 드롭 정보를 저장하고 드래그 앤 드롭 정보를 얻는 데 사용됩니다. 그 중 setData()는 드래그 이벤트 시작시, 즉 dragstart 이벤트가 설정된 경우에만 설정할 수 있으며, getData()는 일반적으로 drop 이벤트가 트리거될 때 획득된다.

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

로그인 후 복사

전체 코드





  
  HTML5 拖拽




  <p draggable="true"></p>
  
    
  
  

<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

로그인 후 복사

문제가 있습니다

Firefox 브라우저의 기본 드래그 앤 드롭 이미지

새 창을 열고 JavaScript 고급 프로그래밍에 따라 드롭 이벤트에서 기본 이벤트를 비활성화해도 문제가 해결되지 않습니다.

해결 방법:

이미지를 p의 배경 이미지로 사용하고 p를 드래그 개체로 사용하면 이 문제는 발생하지 않습니다. 최종 코드





  
  HTML5 拖拽
  




  
  
  

<script>
var droptarget = document.getElementById(&#39;droptarget&#39;);
var dragobj = document.getElementById(&#39;dragobj&#39;);

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener(&#39;dragstart&#39;, function(event) {
  event.dataTransfer.setData(&#39;id&#39;, dragobj.id);
});
droptarget.addEventListener(&amp;#39;dragenter&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&amp;#39;dragover&amp;#39;, function(event) {
  event.preventDefault();
});
droptarget.addEventListener(&#39;drop&#39;, function(event) {
  var id = event.dataTransfer.getData(&#39;id&#39;);
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

로그인 후 복사

위 내용은 JavaScript HTML5에서 드래그 기능을 쉽게 구현하는 기술에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!