ホームページ >ウェブフロントエンド >jsチュートリアル >JS ネイティブドラッグアンドドロップのサンプルコード共有

JS ネイティブドラッグアンドドロップのサンプルコード共有

高洛峰オリジナル: 2017-03-30 16:13:491197ブラウズ

ドラッグ可能

Web ページ内の画像、リンク、テキストはデフォルトでブラウザでドラッグできます。HTML5 すべての HTML 要素には、draggable属性が指定されています。この属性の値がtrueの場合、その要素はドラッグ可能であるとみなされます。

画像またはリンクの上にマウスを置くと、ドラッグできます。テキストをドラッグするときは、最初にテキストを選択してから、

イベント

Picture

が順番にトリガーされます。これらのイベントのターゲット。 3 つのイベントはドラッグされた要素です。マウスボタンが押されてマウスが移動し始めると、ドラッグ開始イベントがトリガーされます。要素がドラッグされている間は、要素が有効な配置ターゲットに配置されているか無効な配置ターゲットに配置されているかに関係なく、ドラッグイベントがトリガーされ続けます。Place target element イベント。

要素が有効なドロップターゲットにドラッグされると、dragenter、dragover、dragleave、または Drop イベントが 1 回トリガーされます

要素がドロップにドラッグされている限り、dragenter イベントがターゲットでトリガーされ、続いてドラッグされた要素が配置ターゲットの範囲内で移動している場合は、dragover イベントが引き続きトリガーされます。要素が配置ターゲットの外にドラッグされた場合、dragover イベントがトリガーされます。要素がドロップターゲットに配置されると、dragleave イベントがトリガーされなくなります。これらのイベントのターゲットは、ドロップターゲットである要素です。サポートは良好ですが、Firefox ではあまり良くありません

カスタム配置ターゲット

ドラッグエンターイベントとドラッグオーバーイベントのデフォルトの

動作をオーバーライドすることで、任意の要素を有効な配置ターゲットに変えることができます

FF では、配置イベントのデフォルトの動作は次のとおりですドロップターゲットにドロップされた URL を開くには、ドロップターゲットに画像をドラッグアンドドロップすると、ドロップターゲットにテキストをドラッグアンドドロップすると、ページが画像ファイルにリダイレクトされます。画像ファイルが無効な URL エラーになります

したがって、FF が通常のドラッグアンドドロップをサポートするには、ドロップイベントのデフォルトの動作をキャンセルして、URL が開かれないようにする必要があります。ネイティブドラッグアンドドロップの特徴は、ドラッグアンドドロップイベントを使用してデータを転送できることです。これにより、ブラウザはデスクトップアプリケーションと同様のドラッグアンドドロップ操作機能をネイティブにサポートできます。 dataTransfer というインターフェースが必要です。

dataTransfer オブジェクトはイベントオブジェクトのプロパティであり、getData() と setData() という 2 つの主要なメソッドがあります。 setData() は値の保存に使用され、getData() は setData() で保存された値の取得に使用されます。

テキストボックス内のテキストをドラッグすると、ブラウザは setData() メソッドを呼び出して、ドラッグしたテキストを dataTransfer オブジェクトに「テキスト」形式で保存します。同様に、リンクまたは画像をドラッグアンドドロップすると、setData() メソッドが呼び出され、URL が保存されます。次に、これらの要素をドロップターゲットにドラッグアンドドロップすると、getData() メソッドを通じてデータを読み取ることができます。

保存される

データ型

は「text」または「url」です。HTML5では、この2つのデータ型は「text/plain」と「text/uri-list」にマッピングされますデータをテキストとURLとして保存することができます。違いです。データをテキスト形式で保存した場合、データは特別な処理を受けません。データを URL として保存すると、ブラウザはそのデータを Web ページ内のリンクとして扱います。つまり、別のブラウザウィンドウに配置すると、ブラウザはその 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>

画像のドラッグアンドドロップ:

<!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>

画像のドラッグアンドドロップ:

<!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>

dropエフェクトとエフェクト許可されるプロパティ

ではなく、dataTransfer オブジェクトを使用しますデータのみを転送できます。これは、ドラッグされた要素とドロップターゲット要素がどのような操作を受け取ることができるかを決定するためにも使用できます。これには、dropEffect プロパティとeffectAllowed プロパティの 2 つのプロパティへのアクセスが必要です。

dropEffect ブラウザは、カーソルを配置した後のユーザーの動作を改善するために、さまざまな値に応じてさまざまなタイプのカーソルを表示します。 DropEffect には次の値が含まれます:

•"none": ドラッグされた要素をここに配置することはできません

•"move": ドラッグされた要素はドロップターゲットに移動する必要があります

•"

copy

": をコピーする必要があります要素をドロップターゲットにドラッグしました

•"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）！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptのマウスイベント次の記事：JavaScriptのマウスイベント

続きを見る

JS ネイティブ ドラッグ アンド ドロップのサンプル コード共有

関連記事

JS ネイティブドラッグアンドドロップのサンプルコード共有