집 > 기사 > 웹 프론트엔드 > js 기본 드래그 앤 드롭을 위한 샘플 코드 공유

js 기본 드래그 앤 드롭을 위한 샘플 코드 공유

高洛峰원래의: 2017-03-30 16:13:491165검색

드래그 가능

웹 페이지의 이미지, 링크 및 텍스트는 기본적으로 브라우저에서 드래그할 수 있습니다. HTML5는 모든 HTML 요소에 대해 드래그 가능한속성을 제공합니다. 이 속성의 값이 true이면 해당 요소를 드래그할 수 있는 것으로 간주합니다. >

이미지나 링크를 드래그할 때는 이미지나 링크 위에 마우스를 놓고 마우스를 누른 채로 드래그하세요. 텍스트를 드래그할 때는 먼저 텍스트를 선택한 후 이렇게 드래그하시면 됩니다. 이미지를 드래그하는 것과 마찬가지로

drag된 요소

이벤트

가

그림을 드래그할 때 순차적으로 발생합니다. end 이벤트의 대상은 드래그된 요소입니다.

이 마우스 버튼을 누르고 마우스를 움직이기 시작하면 드래그된 이벤트가 발생합니다. dragstart 이벤트가 트리거되고 드래그 이벤트가 즉시 트리거되며 요소가 드래그되는 동안 드래그 이벤트가 계속 트리거됩니다. 드래그가 중지되면 요소가 유효한 배치에 배치되었는지 여부에 관계없이 dragend가 트리거됩니다.

대상 요소 배치 이벤트

요소를 유효한 드롭 대상으로 드래그하면 dragenter, dragover, dragleave 또는 drop 이벤트가 한 번 실행됩니다.

요소를 드롭 대상으로 드래그하는 한 dragenter 이벤트가 트리거되고 드래그 오버 이벤트가 뒤따릅니다. 드래그된 요소가 범위 내에서 계속 이동하는 동안 드래그 오버 이벤트가 계속 트리거됩니다. ; 요소를 드롭 대상 밖으로 드래그하면 dragover 이벤트가 더 이상 트리거되지 않지만, 요소를 드롭 대상에 드롭하면 드롭 이벤트가 트리거됩니다.

Google Chrome에서는 잘 지원되지만 Firefox에서는 좋지 않습니다.

맞춤 배치 대상

모든 요소를 유효한 배치 대상으로 바꿀 수 있습니다. 메서드는 dragenter 및 dragover 이벤트

의 기본

동작을 재정의하는 것입니다. FF에서 드롭 이벤트의 기본 동작은 드롭 대상에 있는 URL을 여는 것입니다. , 이미지를 끌어서 놓기 대상에 놓으면 페이지가 이미지 파일로 리디렉션됩니다. 텍스트를 놓기 대상에 끌어서 놓으면 잘못된 URL 오류가 발생합니다.

따라서 이를 위해 FF는 일반적인 드래그 앤 드롭을 지원하며, 드롭 이벤트의 기본 동작을 취소하여

dataTransfer

객체를 사용합니다. -drop 이벤트를 통해 데이터를 전달하므로 브라우저는 기본적으로 데스크톱 애플리케이션과 유사한 드래그 앤 드롭 상호 작용 기능을 지원할 수 있습니다. 데이터 전송 기능을 사용하려면 dataTransfer라는

인터페이스

가 필요합니다. dataTransfer 개체는 이벤트 개체의 속성으로 getData()와 setData()라는 두 가지 주요 메서드가 있습니다. setData()는 값을 저장하는데 사용되고, getData()는 setData()에 의해 저장된 값을 얻는데 사용됩니다.

텍스트 상자의 텍스트를 드래그하면 브라우저는 setData() 메서드를 호출하여 드래그한 텍스트를 dataTransfer 개체에 "텍스트" 형식으로 저장합니다. 마찬가지로 링크나 이미지를 드래그 앤 드롭하면 setData() 메서드가 호출되고 URL이 저장됩니다. 그런 다음 이러한 요소를 드롭 대상으로 드래그 앤 드롭하면 getData() 메서드를 통해 데이터를 읽을 수 있습니다. 저장된

데이터 유형

은 "text" 또는 "url"입니다. HTML5에서는 이 두 데이터 유형이 "text/plain" 및 "text/uri-list"에 매핑됩니다.

데이터를 텍스트로 저장하는 것과 URL로 저장하는 것은 차이가 있습니다. 데이터를 텍스트 형식으로 저장하면 해당 데이터는 특별한 처리를 받지 않습니다. 데이터를 URL로 저장하면 브라우저는 이를 웹 페이지의 링크로 처리합니다. 즉, 다른 브라우저 창에 놓으면 브라우저가 URL을 엽니다.

데모:텍스트 드래그 앤 드롭:

링크 드래그 앤 드롭:

이미지 드래그 앤 드롭:

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5文本拖放</title>
<head>
<style type="text/css">
#p1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p id="p1">拖动文本到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
  //dataTransfer.setData() 方法设置被拖数据的数据类型和值
  //这里数据类型是 "Text"，值是p标签中的文本
ev.dataTransfer.setData("Text",document.getElementById("p1").innerHTML);
}
 
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.innerHTML=data;
}
</script>
</body>
</html>

이미지를 앞뒤로 드래그 앤 드롭:

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5链接拖放</title>
<head>
<style type="text/css">
#p1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<a href="http://www.baidu.com" id="aa">链接到百度</a>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<script type="text/javascript">
/*
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
 */
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
  //dataTransfer.setData() 方法设置被拖数据的数据类型和值
  //这里数据类型是 "Text"，值是p标签中的文本
ev.dataTransfer.setData("URL",document.getElementById(data).href);
}
 
function drop(ev)
{
  //调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。
var data=ev.dataTransfer.getData("URL");
ev.target.innerHTML=data;
}
</script>
</body>
</html>

dropEffect 및 effectAllowed 속성

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>HTML5图片拖放</title>
<head>
<style type="text/css">
#p1 {width:220px;height:185px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p id="p1">拖动图片到矩形框中:</p>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
<br>
<img id="drag1" src="abao.png" draggable="true" ondragstart="drag(event)" width="220" height="181">
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
 
function drag(ev)
{
  //dataTransfer.setData() 方法设置被拖数据的数据类型和值
  //这里数据类型是 "Text"，值是可拖动元素的 id ("drag1")
ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>

dataTransfer 객체를 사용하여 데이터를 전송할 뿐만 아니라 드래그된 요소를 결정합니다. 및 해당 동작 드롭 대상 요소가 수신할 수 있는 작업은 무엇입니까? 이를 위해서는 두 가지 속성인 dropEffect 속성과 effectAllowed 속성에 대한 액세스가 필요합니다.

dropEffect 브라우저는 배치 후 사용자의 행동을 개선하기 위해 다양한 값에 따라 다양한 유형의 커서를 표시합니다. dropEffect에는 다음 값이 포함됩니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片来回拖放</title>
    <style type="text/css">
    p{width: 230px;height: 185px;padding: 10px;float: left;margin-right: 10px;border: 1px solid#ccc;}
    </style>
  </head>
  <body>
  <p id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <p id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
  <img src="abao.png" id="drag1" draggable="true" ondragstart="drag(event)">
  <script type="text/javascript">
  function allowDrop(ev){
    ev.preventDefault();
  }
  function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
  }
  function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
  </script>
  </body>
</html>

•"none": 드래그한 요소를 여기에 배치할 수 없습니다.

•"move": 드래그한 요소를 드롭 대상으로 이동해야 합니다

•"

복사

": 드래그한 요소를 드롭 대상에 복사해야 합니다.

•"link":表示放置目标会打开拖动的元素 (但拖动的元素必须是一个链接，有URL)

浏览器仅仅会帮你改变光标的类型，但是要实现怎样的效果都是要开发者自己去实现。

dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed属性表示允许拖动元素的哪种dropEffect行为，它的值有以下几种：

•"uninitialized":没有给被拖动的元素设置任何放置行为。

•"none": 被拖动的元素不能有任何行为

•"copy“：只允许值为 “copy” 的放置行为

•"link":只允许值为 “link” 的放置行为

•"move"：只允许值为 “move” 的放置行为

•"copyLink"：允许值为 “copy” 和 “link” 的放置行为

•"copyMove"：允许值为 “copy” 和 “move” 的放置行为

•"linkMove"：允许值为 “link” 和 “move” 的放置行为

•"all"：允许所有放置行为

必须在ondragstart事件处理程序中设置effectAllowed属性

Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My-dropEffect and effectAllowed</title>
</head>
<body>
  <a href="http://www.baidu.com">链接到百度</a>
  <p style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></p>
  <p id="output"></p>
  <script type="text/javascript" src="EventUtil.js"></script>
  <script type="text/javascript">
  var droptarget = document.getElementById("droptarget");//获取放置目标
  var link = document.links[0];
  //console.log(document.links);//HTMLCollection[a]
  //console.log(document.links[0]);// <a href="http://www.baidu.com">
    function handleEvent(event){
      document.getElementById("output").innerHTML += event.type + "<br>";
      switch(event.type){
        case "dragstart":
        case "dragend":
          event.dataTransfer.dropEffect = "link";
          //表示放置目标会打开拖动的元素。要想使用dropEffect，必须进行相应的设置，这里将其设置为link
          break;
        case "dragenter":
        case "dragover":
          EventUtil.preventDefault(event);
          event.dataTransfer.effectAllowed = "link";//表示值允许"link"的dropEffect
          break;
        case "drop":
        case "dragleave":
          droptarget.innerHTML = event.dataTransfer.getData("url") || 
          event.dataTransfer.getData("text/uri-list");
        //event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");是读取URL
      }
 
    }
 
    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);
    EventUtil.addHandler(link, "dragend", handleEvent);
  </script>
</body>
</html>

Demo2:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My-dropEffect and effectAllowed</title>
</head>
<body>
<a href="http://www.baidu.com">链接到百度</a>
  <p>哈哈哈哈</p>
  <p style="width: 200px; height: 100px; float: right; background: red" id="droptarget"></p>
  <p id="output"></p>
  <script type="text/javascript" src="../EventUtil.js"></script>
  <script type="text/javascript">
  var droptarget = document.getElementById("droptarget");//获取放置目标
  var link = document.links[0];
  //console.log(document.links);//HTMLCollection[a]
  //console.log(document.links[0]);// <a href="http://www.baidu.com">
    function handleEvent(event){
      document.getElementById("output").innerHTML += event.type + "<br>";
      switch(event.type){
        case "dragstart":
        case "dragend":
          event.dataTransfer.dropEffect = "move";//表示应该把拖动的元素移动到放置目标
        case "dragenter":
        case "dragover":
          EventUtil.preventDefault(event);
          event.dataTransfer.effectAllowed = "move";//表示值允许"move"的dropEffect
          break;
        case "drop":
        case "dragleave":
          EventUtil.preventDefault(event);
          //这里是为了阻止放置事件的默认行为：打开被放到放置目标上的URL
          droptarget.innerHTML = event.dataTransfer.getData("Text");
      }
 
    }
    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);
    EventUtil.addHandler(link, "dragend", handleEvent);
  </script>
</body>
</html>

以上就是js原生拖放的示例代码分享的内容，更多相关内容请关注PHP中文网（www.php.cn）！

성명：

이전 기사：자바스크립트 마우스 이벤트다음 기사：자바스크립트 마우스 이벤트

js 기본 드래그 앤 드롭을 위한 샘플 코드 공유

관련 기사