简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

html5ガイド-3. html要素のドラッグ＆ドロップ機能の実装方法_html5チュートリアルスキル

WBOY
リリース： 2016-05-16 15:50:16
オリジナル
1917 人が閲覧しました

この記事の内容は、html5でhtml要素のドラッグ＆ドロップ機能を実装する方法についてです。 html5 より前は、ドラッグ アンド ドロップを実装するには js を使用する必要がありました。現在、html5 では内部でドラッグ アンド ドロップ機能がサポートされていますが、もう少し複雑な機能を実装するには、やはり js の助けが不可欠です。以下にいくつかの例を見てみましょう。
1. ドラッグ オブジェクトを作成します
どの要素がドラッグ機能を実装する必要があるかを、draggable 属性を通じてブラウザーに伝えることができます。 raggable には 3 つの値があります: true: 要素はドラッグできます; false: 要素はドラッグできません; auto: 要素がドラッグできるかどうかはブラウザーが決定します。
システムのデフォルト値は auto ですが、auto の場合、ブラウザーは要素ごとに異なるドラッグ アンド ドロップ機能をサポートします。たとえば、img オブジェクトはサポートされますが、div オブジェクトはサポートされません。したがって、要素をドラッグする必要がある場合は、draggale を true に設定するのが最善です。以下の例を見てみましょう:

コードをコピーします
コードは次のとおりです:





<script> <br />var src = document.getElementById("src"); <br />var target = document.getElementById("target"); <br /> /html> <br /><br /><br />操作の効果: <br /> <br /><br /><br /> <br /><br />2. ドラッグ イベントの処理 <br /> <br />次に、ドラッグ関連のイベントについて学びましょう。1 つはドラッグ オブジェクトのイベント、もう 1 つはドラッグ オブジェクトのイベントです。ドロップエリアイベント。ドラッグ イベントには、次のものが含まれます。以下の例を見てみましょう: <br /><br /><br /><br /><br />コードをコピーします<br /><p><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010716232011.png" />コードは次のとおりです:<br /> <strong><DOCTYPEHTML><head><br /><style> 🎜>{ <br />float: left; <br>#target, #src > img <div class="msgheader">{ <div class="right">border: 薄い黒の塗りつぶし: 2px; 4px; <span style="max-width:90%" onclick="copycode(getid('phpcode133'));">} <u>{ 高さ: 123px; 幅: 220px; 表示: テーブル; 🎜>#target > p { <div class="msgborder" id="phpcode133">display: table-cell; <br />vertical-align: middle; <br />#target > img <br />{ <br />margin: 1px; <br />} <br />img.dragged <br />{ <br />背景色; <br />} <br />ボディ> <br /><div id="src"> <br /><imgraggable="true" id="html5ガイド-3. html要素のドラッグ＆ドロップ機能の実装方法_html5チュートリアルスキル" src="img/1.jpg" alt="html5ガイド-3. html要素のドラッグ＆ドロップ機能の実装方法_html5チュートリアルスキル" /> ><imgraggable="true" id="car2" src="img/2.jpg" alt="car2" /> <br /><imgraggable="true" id="car3" src=" img/3.jpg" alt="car3" /> <br /><div id="target"> <br /><p id="msg"> <br />ここにドロップ <br /><br /><script><br />var src = document.getElementById("target") ); <br />var msg = document.getElementById("msg"); <br />src.ondragstart = function (e) { <br />e.target.classList.add("dragged"); 🎜>src.ondragend = function (e) { <br />e.target.classList.remove("dragged"); <br />msg.innerHTML = "ここにドロップ"; <br />src.ondrag =関数 (e) { <br />msg.innerHTML = e.target.id>} <br /></script>
関連ラベル：
html要素 引っ張る
ソース：php.cn
前の記事：html5 キャンバス描画チュートリアル (4) — 閉じられていないパスとグラデーション塗りつぶしの方法_html5 チュートリアルのスキル 次の記事：html5 Canvas描画チュートリアル(3) ～canvas_html5チュートリアルスキルで1ピクセルの線が滲む理由～
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！