html5-拖拽

最新推荐文章于 2023-10-14 12:41:19 发布
最新推荐文章于 2023-10-14 12:41:19 发布
阅读量65 收藏
点赞数
原文链接：http://www.cnblogs.com/wyq-web/p/9496213.html
版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<title>拖放操作</title>
<meta name="author" content="汪磊">
<link rel="stylesheet" href="bootstrap.css">
<style>
#target {
padding: 20px;
height: 300px;
border: 5px dashed #c0c0c0;
color: #e0e0e0;
font-size: 40px;
line-height: 260px;
text-align: center;
-webkit-user-select: none;
cursor: pointer;
}

#target.actived {
border-color: #888;
color: #fafafa;
box-shadow: 0 0 80px #e0e0e0 inset;
}
</style>
</head>

<body>
<div class="container">
<div class="page-header">
<h1>Drag&Drop</h1></div>
<div class="jumbotron">
<p>你好啊，你今年几岁啊，哈哈，我的今天在哪里</p>
<img src="toy.png" alt="">
</div>
<ul id="result" class="list-group"></ul>
<div id="target">
Drag something into here
</div>
</div>
<script>
//找到目标位置框框
var target = document.querySelector("#target");
var fileList = document.querySelector("#result");
//注册拖拽进入
target.addEventListener("dragenter",function(){
this.classList.add("actived");
});
//注册拖拽离开
target.addEventListener("dragleave",function(){
this.classList.remove("actived");
});
//如果想要捕获drop事件，就一定得在该事件中阻止默认事件
target.addEventListener("dragover",function(e){
e.preventDefault();
e.stopPropagation();
});
//当元素放到该对像上
target.addEventListener("drop",function(e){

if(e.dataTransfer.files.length){
var files = e.dataTransfer.files;
for(var i=0;i<files.length;i++){
var li = document.createElement('li');
li.innerHTML = '<h5 class="list-group-item-heading">'+files[i].name+'</h5>'+
'<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleDateString()+' '+
files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'KB'+
'</p>';
fileList.appendChild(li);
}
}else {
// var data = e.dataTransfer.getData('tex/plain')|| 拖入的是文本
// e.dataTransfer.getData('text/uri-list');拖入的是图片
var data = e.dataTransfer.getData('text/plain');
if(data){
target.innerHTML = data;
}else {
var img = document.createElement('img');
img.src = e.dataTransfer.getData('text/uri-list');
target.appendChild(img);
}
}

 

 

this.classList.remove('actived');
e.preventDefault();
e.stopPropagation();
});
</script>
</body>

</html>

转载于:https://www.cnblogs.com/wyq-web/p/9496213.html

anqila1855
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
01-拖拽.html01-拖拽.html
02-15
01-拖拽.html
HTML5拖拽
阳神
02-15 323
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 拖拽和释放 拖拽：Drag 释放：Drop 拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了 设置元素为可拖放 draggable 属性：就是标签元素要设置draggable=true，否则不会有效果 注意： 链接和图片默认是可拖动的，不需要 draggable 属性。 拖拽API的相关事件 被拖动的源对象可以触发的事件...
html5拖拽
Waghhhh的博客
09-14 1433
1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。 拖动事件：dragstart、drag、dragend 放置事件：dragenter、dragover、drop 拖拽事件流： 当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发 dragstart->drag->dragenter->dragover->drop->dragend ---------------------------------------
HTML5—拖拽
最新发布
qq_47218954的博客
10-14 550
拖拽入门
HTML5笔记——拖拽
果冻
05-07 2217
一、拖拽元素 页面中设置了 draggable="true" 属性的元素。 draggable 属性用来定义元素是否可以拖动 该属性有true、false两个值，默认是false 属性是true时可以拖动，反之不能 要想真正实现拖动功能，必须与JavaScript结合使用。 拖拽元素的事件监听：（应用于拖拽元素） ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ondragend 当拖拽结束时调用 ondrag 整个拖拽.
HTML5--拖拽API(含超经典例子)
热门推荐
冯小东
11-18 5万+
一、关于拖拽API 拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放？ 拖拽：Drag 释放：Drop 拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了 三、什么是源对象和目标对象？ 源对象：指的是我们鼠标点击的
HTML5-JQ-拖拽小 案例
07-20
实现使用 JQ + HTML5 实现 拖拽图片功能，JQ使用的版本是3.3.1
HTML5拖拽效果Demo
05-01
HTML5+JS实现的拖拽效果Demo，是通过简单的几句JS代码及可实现将对象从一个容器拖拽到另外一个容器，请用谷歌浏览器或火狐浏览器查看效果。
HTML5拖拽功能实现的拼图游戏
12-13
具体代码如下所示：   <!--代码如下，最下面给出了我测试用的9张250*250的图片切片-->...drag拖拽</title> <style> .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{
HTML5-鼠标拖动弹性动画特效.zip
07-11
代码片段：    用鼠标拖动。  按1键作慢动作。  按2表示零重力。  按3表示反向重力。   </div>
HTML5实现拖放
上庸者-不服周
09-30 3442
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
html5拖放详解,HTML5拖拽/拖放(drag & drop)详解
weixin_35812582的博客
06-24 944
H5中拖拽属性：draggable： auto | true | false拖动事件：- dragstart 在元素开始被拖动时触发- dragend 在拖动操作完成时触发- drag 在元素被拖动时触发释放区事件：dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发dragover 当被拖动元素在释放区内移动时触发dragleave 当被拖动元素没有放下就离开释放区时触发drop 当...
html5如何实现拖拽,HTML5 如何实现拖放
weixin_36289292的博客
06-16 1419
拖放是一种常见的特性，也就是抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖放事件拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。被拖动元素的相关事件如下所示：事件描述ondragstart用户开始拖动元素时触发ondrag元素正在拖动时触发ondragend用户完成元素拖动后触发容器相关事件如下所示：事件描述ondra...
HTML 五十七 HTML5 拖放
W_H_M_2018的博客
09-20 220
拖放 拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。 拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。 浏览器支持 表格中的数字指示了完全支持拖放的首个浏览器版本。 HTML 拖放实例 下列是关于拖放的简单例子： 实例 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:198px; height:66px;pa
HTML5 的拖拽介绍
weixin_30788619的博客
12-02 79
本文主要介绍与拖拽操作相关的对象及事件信息，但并不涉及太多的源码演示。 一个简单的示例 在html5中要实现拖放操作，相对于以前通过鼠标操作实现，要简单得多，数据安全性也更有保障。只需要以下几步即可。 给被拖拽元素添加draggable属性，如果是文件拖放。 为目标元素添加一个dropzone属性，这一步也不是必须的，可以省略。 在拖拽元素的dragstart中初始化相关的数据信息，...
html中的拖拽功能,HTML5中的drag拖拽功能介绍
weixin_42204453的博客
06-16 1912
拖放(Drag 和 drop)是 HTML5 标准的组成部分，本文主要介绍与拖拽操作相关的对象及事件信息。要接受元素的放下，目标元素必须监听至少3个事件：首先是dragenter事件，用来决定是否接受“拖动的元素”被放下，如果接受放下，那么该事件就被取消，进入下一个事件然后开始dragover事件，用来确定给用户什么样的反馈，即位于该元素之上时呈现什么样的效果，如果该事件被取消，反馈一般是一个鼠标...
html5实现元素拖拽,实现元素拖拽的两种方式
weixin_32142311的博客
06-19 1792
第一种方式：使用h5的api datatransfer实现思路：1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。代码如下：.box1 {width: 100px;height: 100px;border: 1px black solid;margin-...
HTML5 拖拽
jdrunk的博客
01-19 117
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽2</title> <style type="text/css"> body{ height: 600px; border: 1px solid green; }
html拖拽垃圾桶,h5学习 -- 拖拽事件模拟垃圾桶
06-03
好的，这是一个关于HTML拖拽事件模拟垃圾桶的问题。在HTML5中，可以使用拖拽事件来实现拖拽元素到垃圾桶的效果。下面是一个简单的示例代码： 首先，需要添加一个垃圾桶的元素： ```html 垃圾桶 ``` 然后，在需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值