Maison > interface Web > Tutoriel H5 > le corps du texte

Utilisez HTML5 pour implémenter une fonction de glisser simple

王林
Libérer: 2020-12-10 16:59:04
avant
4384 Les gens l'ont consulté

Utilisez HTML5 pour implémenter une fonction de glisser simple

La méthode spécifique est la suivante :

1. Définissez l'attribut déplaçable de l'élément objet sur true (draggable="true"). Il convient également de noter que l'élément a et l'élément img doivent spécifier href;

2. Écrivez le code de gestion des événements lié au glisser-déposer :

(Partage de vidéos d'apprentissage : vidéo html tutoriel)

Utilisez HTML5 pour implémenter une fonction de glisser simple

3. Code d'implémentation du cas :

(1) Segment de code 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="Utilisez HTML5 pour implémenter une fonction de glisser simple" >
Copier après la connexion

(2) CSS segment de code :

#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;
}
Copier après la connexion

(3) Extrait de code 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));
};
Copier après la connexion

4. L'effet obtenu est le suivant :

(1) Avant le glisser-déposer :

Utilisez HTML5 pour implémenter une fonction de glisser simple

(2) Après glisser-déposer

Utilisez HTML5 pour implémenter une fonction de glisser simple

Recommandations associées : Tutoriel HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!