私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

WebサイトのHTMLドラッグアンドドロップ機能を作成する方法

WebサイトのHTMLドラッグアンドドロップ機能を作成する方法


November, 12 2021

今日は、ウェブサイトのドラッグアンドドロップ機能を作成する方法を学びます HTML、CSS、Javascriptで!

html5をドラッグアンドドロップします

その前に、htmlのドラッグアンドドロップのイベントを簡単に紹介します。

ondragstartユーザーがオブジェクトのドラッグを開始したときにイベントをトリガーします。
ondragenter別のオブジェクトをドラッグしているときに、マウスポインタが最初に要素上を移動したときに発生します。
ondragendオブジェクトのドラッグの最後に発生します。
ondragover別のオブジェクトをドラッグしているときにマウスポインタが要素上を移動すると発生します。
ondragleaveオブジェクトが有効なドロップターゲットを離れたときに発生します。
ondropオブジェクトが有効なドロップターゲットにドロップされたときに発生します。
ondragオブジェクトがドラッグされたときにトリガーされます。

次に、以下のコードを使用してドラッグアンドドロップ関数を作成する方法を学習します。

HTML:

 <p>画像を上のボックスにドラッグしてください。</p>
 <!-- 画像をドロップするボックスを作成する-->
 <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
 </div>
  <!--画像にはドラッグアンドドロップを実行するイベントが含まれています-->
 <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1596598262/lzflihbv1tcwlyv4cnuc.jpg" id="dragA"   draggable="true" ondragstart="dragStart(event);" width="180" height="180" alt="画像">

CSS

#dropBox {
  width: 200px;
  height: 200px;
  border: 2px dashed white;
  background: CornflowerBlue;
  text-align: center;
  margin: 20px 0;
  color: orange;
}
#dropBox img {
  margin: 10px;
}

次に、Javascriptを追加して、ドラッグアンドドロップ機能を実行します。

Javascript

 function dragStart(e) {
 /*オブジェクトを移動できる機能を設定する*/
   e.dataTransfer.effectAllowed = "move";
 /* ドラッグアンドドロップオブジェクトの値とスタイルを設定します*/
   e.dataTransfer.setData("Text", e.target.getAttribute("id"));
 }
 function dragOver(e) {
 /*ブラウザのデフォルト処理を防止する*/
   e.preventDefault();
   e.stopPropagation();
 }
 function drop(e) {
 /*他のアクションのイベントをキャンセルする*/
   e.stopPropagation();
   e.preventDefault();
 /*タイプ別にデータを取得する*/
   var data = e.dataTransfer.getData("Text");
 /*ドラッグした画像を前に作成したセルに追加します*/
   e.target.appendChild(document.getElementById(data));
 }

そして、あなたは以下の最終結果を見ることができます

See the Pen html5をドラッグアンドドロップします by haycuoilennao19 (@haycuoilennao19) on CodePen.

ドラッグアンドドロップの例

Drag And Drop HTML

 Drag And Drop HTML

以下の結果を見ることができます。

See the Pen To do List [Drag and Drop] by Gabriel Ferreira (@gabrielferreira) on CodePen.

リンク

Drag And Drop Javascript

以下の結果を見ることができます。

See the Pen simple drag and drop example — week 36/52 by Mert Cukuren (@knyttneve) on CodePen.

リンク

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

Tạo 画像のドラッグアンドドロップ

以下の結果を見ることができます。

See the Pen Drag and Drop Game by Coding Journey (@Coding_Journey) on CodePen.

リンク

CSS3Javascriptをドラッグアンドドロップします

CSS3Javascriptをドラッグアンドドロップします

以下の結果を見ることができます。

See the Pen Draggable div || Drag and Drop by Zayn (@ZaynAlaoudi) on CodePen.

リンク

Drag And Drop UI

Drag And Drop UI

以下の結果を見ることができます。

See the Pen Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.

リンク

Jqueryのドラッグアンドドロップ

Jqueryのドラッグアンドドロップ

以下の結果を見ることができます。

See the Pen HTML5 Drag and Drop by Jason (@jdigi) on CodePen.

リンク

Reactドラッグアンドドロップ

Reactドラッグアンドドロップ

以下の結果を見ることができます。

See the Pen Drag & Drop Grid Layout in React by Tim Ramage (@tjramage) on CodePen.

リンク

HTML5 Drag And Drop

 HTML5 Drag And Drop

以下の結果を見ることができます。

See the Pen Drag and Drop Coloring by Blake Bowen (@osublake) on CodePen.

リンク

Dragula.jsによるドラッグアンドドロップ

Dragula.jsによるドラッグアンドドロップ

以下の結果を見ることができます。

See the Pen Simple Drag and Drop Lean Kanban Board Tool by Nikki Pantony (@nikkipantony) on CodePen.

リンク

Javascriptのドラッグアンドドロップ

 Javascriptのドラッグアンドドロップ

以下の結果を見ることができます。

See the Pen Drag and Drop by Stuart Urback (@Stuwert) on CodePen.

リンク

角度のあるドラッグアンドドロップ

 Javascriptのドラッグアンドドロップ

以下の結果を見ることができます。

See the Pen Kevin McCallister's Grocery List by Ryan Mulligan (@hexagoncircle) on CodePen.

リンク

JqueryUIをドラッグアンドドロップします

JqueryUIをドラッグアンドドロップします

以下の結果を見ることができます。

See the Pen Html5: Drag and Drop by Larry Geams Parangan (@larrygeams) on CodePen.

リンク

UIドラッグアンドドロップHTML5

UIドラッグアンドドロップHTML5

以下の結果を見ることができます。

See the Pen CSS Counters drag-and-drop demonstration by SitePoint (@SitePoint) on CodePen.

リンク

アニメーションのドラッグアンドドロップHTML5

アニメーションのドラッグアンドドロップHTML5

以下の結果を見ることができます。

See the Pen jQuery Ui Drag Drop with Animation by Max Smith (@mxg) on CodePen.

リンク

ブートストラップをドラッグアンドドロップします

ブートストラップをドラッグアンドドロップします

以下の結果を見ることができます。

See the Pen Draggable Panels Bootstrap test by Nate (@nonstopnate) on CodePen.

リンク

JavascriptUIドラッグアンドドロップリスト

JavascriptUIドラッグアンドドロップリスト

以下の結果を見ることができます。

See the Pen HTML Drag-and-drop by Justin (@harwoodjp) on CodePen.

リンク

JSをドラッグアンドドロップします

JSをドラッグアンドドロップします

以下の結果を見ることができます。

See the Pen Drag and Drop Ball by Jack Rugile (@jackrugile) on CodePen.

リンク

HTMLWebサイトをドラッグアンドドロップします

 HTMLWebサイトをドラッグアンドドロップします

以下の結果を見ることができます。

See the Pen Simple drag and drop with JavaScript by haycuoilennao19 (@haycuoilennao19) on CodePen.

リンク

ライブラリをドラッグアンドドロップします

コーディングの労力を軽減し、ドラッグアンドドロップ機能のための多くの美しいモーションエフェクトを作成します そしてドロップ)それから私はこの関数を作成するためにいくつかの一般的に使用されるJavascriptライブラリを紹介したいと思います!

Draggable

Draggable

リンク

SortableJS

SortableJS

リンク

Dragula

Dragula

リンク

Draggabilly

Draggabilly

リンク

DRAGON DROP

DRAGON DROP

リンク

table-dragger

table-dragger

リンク

Interact.js

Interact.js

リンク

HTML5 Sortable

HTML5 Sortable

リンク

結論:

この記事があなたのウェブサイトプロジェクトにドラッグ機能を提供することを願っています。 ご不明な点がございましたら、メールにてお問い合わせください。 お早めにご連絡いたします。 より良い記事を書くことができるように、ページをサポートし続けてください。