`

1.0.4 drag和drop拖放标签

html5 dragdrop拖放 
阅读更多
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
----将图片拖入到DIV中  dragg.html
<!DOCTYPE html>
<html>
<title>将图片拖入到DIV中</title>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
//设置被拖动的数据
function drag(event){
//设置备拖动数据的数据类型和值
//本例中数据类型为Text，值是可拖动元素的id("drag1")
event.dataTransfer.setData("Text",event.target.id);
}

//设置在何处放置备拖动的数据
function drop(event){
//当放置被拖动时会触发该事件
//默认地，无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式
event.preventDefault();
}

//放置设置
function allowDrop(event){
//调用preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接方式打开）
event.preventDefault();
//通过dataTransfer.getData("Text")方法获取被拖的数据，该方法将返回在setData()中的设置的相同类型的任何数据
var data=event.dataTransfer.getData("Text");
//把被拖元素追加到放置元素中
event.target.appendChild(document.getElementById(data));
}

</script>
</head>
<body>
<p> 请将图片拖到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>
<br/>
<img id="drag1" src="w3school_banner.gif" draggable="true" ondragstart="drag(event)"></img>
</body>
</html>





@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai
分享到：
| 1.0.3 audio音频标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DotNetCore.1.0.4_1.1.1-WindowsHosting

    标题中的 "DotNetCore.1.0.4_1.1.1-WindowsHosting" 指的是.NET Core的一个特定版本，即1.0.4和1.1.1的组合，特别针对Windows服务器上的Web应用托管。 这个版本包含了Windows服务器上部署.NET Core Web应用所需的...

    eXtremeComponents-1.0.4.zip

    在版本1.0.4中，这个库已经经过了充分的优化和测试，确保了稳定性和兼容性。 extremetable标签是eXtremeComponents的核心组件，它允许开发者通过简单的标签语法实现动态、可定制的表格。与displaytag类似，...

    javax.json-1.0.4-API文档-中文版.zip

    赠送jar包：javax.json-1.0.4.jar； 赠送原API文档：javax.json-1.0.4-javadoc.jar； 赠送源代码：javax.json-1.0.4-sources.jar；...人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。

    esp32-1.0.4.zip

    总结来说，"esp32-1.0.4.zip"是一个专为ESP32微控制器设计的Arduino开发环境和库的离线版本，提供了完整的开发工具，方便用户在无网络环境下进行物联网项目开发。无论你是初次接触ESP32的新手还是经验丰富的开发者，...

    LoRaWAN 1.0.4终端认证规范

    LoRaWAN 1.0.4版本是该协议的更新版本，其中包含了针对终端设备的认证规范，以确保各种区域的终端设备都符合最新的技术标准和安全要求。下面详细解释标题和描述中提到的知识点： 1. LoRaWAN协议及其版本 LoRaWAN...

    sha-1.0.4.tar

    `sha-1.0.4.tar.gz`是一个压缩文件，它结合了两种常见的文件压缩格式：`.tar`和`.gz`。`.tar`文件是一个打包工具，它能将多个文件和目录组合成一个单一的归档文件，便于存储、备份和传输。`.gz`则是使用Gzip程序进行...

    LoRaWAN 1.0.4 Specification

    在LoRaWAN 1.0.4中，通过调整扩频因子、编码速率和发射功率，可以优化网络覆盖范围和容量，同时减少干扰。 3. **多级寻址** LoRaWAN支持多级寻址机制，包括设备地址、网络地址和应用地址，使得大规模设备连接成为...

    commons-logging-1.0.4.jar 免费下载

    标签 "java jar包 spring" 强调了这个库与 Java 和 Spring 的关联。Java JAR 文件是 Java 应用程序的标准打包格式，包含了编译后的类文件和资源。Spring 框架是 Java 企业级开发的主流选择，提供了依赖注入、AOP...

    intellij-spring-assistant-1.0.4.zip

    Spring Assistant 1.0.4是针对IntelliJ IDEA的一个增强型插件，旨在简化Spring项目中的代码编写、调试和管理过程。它提供了诸如自动代码补全、快速导航、智能提示等实用功能，使开发者能够更专注于业务逻辑，而非...

    Firefox Setup 1.0.4.exe

    Firefox Setup 1.0.4.exeFirefox Setup 1.0.4.exeFirefox Setup 1.0.4.exeFirefox Setup 1.0.4.exeFirefox Setup 1.0.4.exe

    FullBNT-1.0.4_贝叶斯_贝叶斯网络_FullBNT-1.0.4_

    这个版本1.0.4是对早期版本的改进，旨在提高稳定性和性能，同时增加新的功能和优化现有算法。 **贝叶斯网络基础：** 贝叶斯网络，也称为贝叶斯网或信念网络，是概率图模型的一种，用于表示变量之间的条件概率分布。...

    scala-parser-combinators-2.11-1.0.4-API文档-中文版.zip

    赠送jar包：scala-parser-combinators_2.11-1.0.4.jar； 赠送原API文档：scala-parser-combinators_2.11-1.0.4-javadoc.jar； 赠送源代码：scala-parser-...人性化翻译，文档中的代码和结构保持不变，注释和说明精

    Hadoop-core-1.0.4

    hadoop-core-1.0.4.jar

    Hash_1.0.4_XiaZaiBa

    总的来说，Hash_1.0.4_XiaZaiBa是一款实用的桌面工具，对于普通用户和IT专业人士而言，它都能提供便捷、准确的文件哈希值计算服务，保障数据安全和文件完整性的验证。然而，考虑到MD5和SHA1的安全性限制，建议在更...

    GLZip-v1.0.4

    7. **更新和维护**：版本号1.0.4表明开发者对软件进行了多次迭代和优化，可能修复了已知问题，提高了性能，或者增加了新的特性以适应不断变化的Gameloft游戏。 8. **API集成**：如果GLZip提供了API，游戏开发者可以...

    虚拟机vmware server 1.0.4中文汉化包

    VMware Server 1.0.4的中文汉化包使得这款产品对中国用户更加友好，消除了语言障碍，使用户能够轻松理解和操作虚拟机设置和管理功能。汉化版的界面和帮助文档均翻译成中文，这对于中文为主要工作语言的用户来说，...

    Hash_1.0.4

    Hash_1.0.4

    SRA.U.1.0.4.apk

    SRA.U.1.0.4.apk

    Hash_1.0.4.rar

    Hash 1.0.4是一款实用的小型工具，专为用户提供了便捷的哈希值计算服务，包括对MD5和SHA1等常见哈希算法的支持。这款工具虽小，但功能强大，能够满足日常的数据校验需求。 哈希，简单来说，是一种将任意长度的数据...

Magicbox
Global site tag (gtag.js) - Google Analytics