ホームページ >ウェブフロントエンド >H5 チュートリアル >html5を使用して簡単なドラッグ機能を実装する
具体的な方法は次のとおりです:
1. object 要素の draggable 属性を true (draggable="true") に設定します。 a 要素と img 要素では href;
2 を指定する必要があることにも注意してください。ドラッグ アンド ドロップに関連するイベント処理コードを記述します:
(学習ビデオ共有: html videoチュートリアル)
3. ケース実装コード:
(1) HTMLコードセグメント:
<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <br /> <img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/ alt="html5を使用して簡単なドラッグ機能を実装する" >
(2) CSSコード セグメント:
#tuo{ width: 540px; height: 320px; background: #e54d26; } #cun{ width: 540px; height: 320px; border: 2px solid #d2d2d2; box-shadow: 1px 4px 8px #646464; } img{ width: 500px; height: 280px; }
(3) JavaScript コード セグメント:
function allowDrop(ev){ //不执行默认处理(拒绝被拖放) ev.preventDefault(); }; function drag(ev){ //使用setData(数据类型,携带的数据) //方法将要拖放的数据存入dataTransfer对象 ev.dataTransfer.setData("Text",ev.target.id); }; function drop(ev){ //不执行默认处理(拒绝被拖放) ev.preventDefault(); //使用getData()获取到数据,然后赋值给data var data = ev.dataTransfer.getData("Text"); //使用appendChild方法把拖动的节点放到元素节点中成为其子节点 ev.target.appendChild(document.getElementById(data)); };
4. 達成される効果は次のとおりです:
(1) ドラッグ アンド ドロップ前:
(2) ドラッグ アンド ドロップ後
##関連する推奨事項:以上がhtml5を使用して簡単なドラッグ機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。