ホームページ > 記事 > ウェブフロントエンド > html5ガイド-3. html要素のドラッグ＆ドロップ機能の実装方法_html5チュートリアルスキル
html5ガイド-3. html要素のドラッグ＆ドロップ機能の実装方法_html5チュートリアルスキル
- WBOYオリジナル
- 2016-05-16 15:50:161896ブラウズ
この記事の内容は、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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。