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

王林
リリース: 2020-12-10 16:59:04
転載
4384 人が閲覧しました

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

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

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

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

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

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

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

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

(2) ドラッグ アンド ドロップ後

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

##関連する推奨事項:

html5 チュートリアル

以上がhtml5を使用して簡単なドラッグ機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!