html5 - 网页拖拽上传文件区域边上的一圈范围提示是怎么实现的？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 网页拖拽上传文件区域边上的一圈范围提示是怎么实现的？

大家讲道理 2017-04-17 11:06:49

[HTML讨论组]

530

比如要拖拽到某个区域，拖动文件的过程中，该区域会变换颜色或者边缘变得明显，我想知道这是 js 实现的还是说有 css 的实现方法？

因为我在 chrome 工具里在拖动的过程中没有看到 class 或是其他样式的修改，我就想是不是 css 3 中有相关的属性？

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(3)

伊谢尔伦2017-04-17 11:08:49 3楼

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/drag

drag
dragstart
dragend
dragover
dragenter
dragleave
drop

在以上事件中绑定DOM操作或者CSS处理，自然就有反应了。

赞 +0

添加回复

天蓬老师2017-04-17 11:08:49 2楼

dragenter和dragleave事件。

百度图片搜索的相应JS：

o.prototype = {
    init: function() {
    var t = this, e = t.addEvent, i = t.content;
    t.initdisplay(),
    e(document, "dragenter", function() {
        t.point.style.display = "none", t.displayst(), t.draghp.style.display = ""
    }), e(i, "dragenter", function(t) {
        t.stopPropagation(), t.preventDefault()
    }), e(i, "dragover", function(t) {
        t.stopPropagation(), t.preventDefault()
    }), e(i, "drop", function(e) {
    })
}

至今没看到不借用JS的实现，又或者LZ给个url来扒一扒？

赞 +0

添加回复