html5を使用して簡単なドラッグ機能を実装する-H5 チュートリアル-php.cn

html5を使用して簡単なドラッグ機能を実装する

具体的な方法は次のとおりです:

1. object 要素の draggable 属性を true (draggable="true") に設定します。 a 要素と img 要素では href;

2 を指定する必要があることにも注意してください。ドラッグアンドドロップに関連するイベント処理コードを記述します:

(学習ビデオ共有:html videoチュートリアル)

html5を使用して簡単なドラッグ機能を実装する

3. ケース実装コード:

(1) HTMLコードセグメント:

ログイン後にコピー

(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) ドラッグアンドドロップ前:

html5を使用して簡単なドラッグ機能を実装する