html實作拖曳的完整程式碼-html教學-PHP中文網

首頁

web前端

html教學

html實作拖曳的完整程式碼

不言

Aug 30, 2018 am 11:39 AM

html拖曳

這篇文章帶給大家的內容是關於css中flaot浮動的原因及帶來的問題分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>drag</title>
	<style type="text/css">
		#p1{
			width :100px; 
			height :30px;
			border:1px solid red; 
		}
	</style>

	<script type="text/javascript">
	function allowDrop(ev){
		ev.preventDefault();
	}

	function drag(ev){
		ev.dataTransfer.setData("Text",ev.target.id);
	}

	function drop(ev){
		ev.preventDefault();
		var data = ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
	</script>
</head>
<body>
	<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
	<br>
	<p id="drag1" draggable="true" ondragstart="drag(event)" >鎷栧姩</p>
</body>
</html>

相關推薦：

html的拖曳動畫實作方法

拖曳一個HTML元素_javascript技巧

以上是html實作拖曳的完整程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

JavaScript 如何实现图片的左右拖动切换效果？Oct 21, 2023 am 09:27 AM

JavaScript如何实现图片的左右拖动切换效果？在现代网页设计中，动态效果可以增加用户体验和视觉吸引力。而图片的左右拖动切换效果是一种常见的动态效果，它可以让用户通过拖动图片来切换不同的内容。在本文中，我们将介绍如何使用JavaScript来实现这种图片切换效果，并提供具体的代码示例。首先，我们需要准备一些HTML和CSS代码，用于创建一个包含多个图片

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

JavaScript 如何实现弹出框的拖动的同时限制在页面可见区域内？Oct 18, 2023 pm 12:26 PM

JavaScript如何实现弹出框的拖动的同时限制在页面可见区域内？在网页开发中，我们常常会遇到需要实现弹出框或对话框的需求。而其中一个常见的需求就是让这些弹出框能够随意拖动，并且限制在页面的可见区域内。本文将介绍如何使用JavaScript来实现这个功能，并提供相应的代码示例。首先，我们需要了解一些基本概念。在Web开发中，页面的可见区域可以用窗口的宽度

JavaScript 如何实现图片的拖动缩放同时限制在容器内？Oct 20, 2023 pm 04:19 PM

JavaScript如何实现图片的拖动缩放同时限制在容器内？在Web开发中，经常会遇到需要对图片进行拖动和缩放的需求。这篇文章将介绍如何使用JavaScript实现图片的拖动缩放，并限制在容器内的操作。一、拖动图片要实现图片的拖动，我们可以使用鼠标事件来跟踪鼠标位置，并将图片的位置随之移动。下面是一个示例代码：//获取图片元素varimage

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

JavaScript 如何实现图片的拖动缩放同时限制在容器内且保持纵横比和居中显示？Oct 20, 2023 pm 01:34 PM

JavaScript如何实现图片的拖动缩放同时限制在容器内且保持纵横比和居中显示？在现代web开发中，图片的拖动、缩放和限制在容器内是非常常见的需求，今天我们将学习如何使用JavaScript实现这个功能，并且保持图片的纵横比和居中显示。首先，我们需要一个HTML页面来展示图片和容器。请确保在HTML文档中引入一个用于显示图片的HTML

JavaScript 如何实现图片的上下拖动切换效果？Oct 18, 2023 am 09:09 AM

JavaScript如何实现图片的上下拖动切换效果？随着互联网的发展，图片在我们生活和工作中扮演着重要的角色。为了提升用户体验，我们常常需要给图片增加一些特效或交互效果。其中，图片的上下拖动切换效果是一种很常见、简洁且实用的效果。本文将介绍如何使用JavaScript实现这一效果，并提供具体的代码示例。首先，我们需要创建一个HTML文件，来展示图片并实现拖

See all articles