<style>
b{
width:400px;
height:300px;
background-color:#CC0;
overflow-y:scroll;
}
</style>
<body>
<div class="b" id="b">子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单</div>
</body>
<script>
var w = documentgetElementById("b");
wonscroll=function(e)
{
consolelog(wscrollTop);
}
</script>
以上代码测试通过
，首先要判断拖入的文件是否符合要求，包括类型、大小等，然后获取本地信息，实现预览，最后上传。
$(function(){
接上部分
var box = documentgetElementById('drop_area'); //拖拽区域
boxaddEventListener("drop",function(e){
epreventDefault(); //取消默认浏览器拖拽效果
var fileList = edataTransferfiles; //获取文件对象
//检测是否是拖拽文件到页面的 *** 作
if(fileListlength == 0){
return false;
}
//检测文件是不是
if(fileList[0]typeindexOf('image') === -1){
alert("您拖的不是！");
return false;
}
//拖拉到浏览器，可以实现预览功能
var img = windowwebkitURLcreateObjectURL(fileList[0]);
var filename = fileList[0]name; //名称
var filesize = Mathfloor((fileList[0]size)/1024);
if(filesize>500){
alert("上传大小不能超过500K");
return false;
}
var str = "<img src='"+img+"'><p>名称："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview")html(str);
//上传
xhr = new XML>
自带拖拽功能
其他元素可设置draggable属性
例子:
>
一、关于拖拽API
拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。
二、什么是拖拽和释放？
拖拽：Drag
释放：Drop
拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了
三、什么是源对象和目标对象？
源对象：指的是我们鼠标点击的一个事物，这里可以是一张，一个DIV，一段文本等等。
目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。
四、拖拽API的相关函数
解释了什么是源对象和目标对象后，回归前端中的拖拽API，由上面的 *** 作我们可以得出几个函数
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
拖拽API总共就是7个函数！！
五、如何在拖动的源对象事件和目标对象事件间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性：
edataTransfer { } //数据传递对象
功能：用于在源对象和目标对象的事件间传递数据
源对象上的事件处理中保存数据：
edataTransfersetData( k, v ); //k-v必须都是string类型
目标对象上的事件处理中读取数据：
var v = edataTransfergetData( k );
一个完整的drag and drop流程通常包含以下几个步骤:
1设置可拖拽目标设置属性draggable="true"使元素编程可拖拽对象
2监听dragstart设置拖拽数据
3为拖拽 *** 作设置反馈图标(可选)
4设置允许的拖放效果,如copy,move,link
5设置拖放目标,默认情况下浏览器阻止所有的拖放 *** 作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖放
6监听drop事件执行所需 *** 作
这些是HTML5的新特性，如果你想了解更有相关的知识，你可以在一个叫做秒秒学的网站查找相关资料。
边框间的距离一般用margin设置，可以分着写margin-top, margin-right, margin-bottom, margin-left。分别设置四个边距。
也可以连写，margin的四个值，对应上面的顺序，不加可以写0，值可以是具体像素数值也可以是百分比。也可以两个值，分别是上下和左右。也可以是三个值，方位对应上，左右，下。
值得注意的是，上下两个盒子的边距会重叠，值取大的那个边距。
以上就是关于实时获取div滚动条滚动距离全部的内容，包括:实时获取div滚动条滚动距离、怎样用html5实现拖拽上传文件、HTML5拖拽事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）