在浏览器中,常见的一种行为就是:选中-拖拽-新页面打开,例如百度搜索就是这样.但是我现在不想让别人在我的个人网页上选中,也不想让他人拖拽我的照片,要怎么做呢?
下面我们来看一下使用css设置图片不可拖动的方法。
css设置图片不可拖动实例：
css居中对齐
div{
width: 500px
height: 500px
border: 1px solid red}
img {
-webkit-user-drag: none
}
css设置图片不可拖动主要使用user-drag来设置。user-drag设置或检索一个元素可以被拖拽。
法：
user-drag：auto | element | none
默认值：auto
适用于：所有元素
继承性：有
动画性：否
计算值：指定值
取值：
auto：使用默认的拖拽行为，这种情况只有图片和链接可以被拖拽。
element：整个元素而非它的内容可拖拽。
none：元素不能被拖动。在通过选中后可拖拽。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="
">
<head>
<title>禁止鼠标拖动图片在新窗口打开</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script language="javascript">
function imgdragstart(){return false}
</script>
</head>
<body>
鼠标左键拖动图片试试！
<!--把下面代码加到<body>与</body>之间-->
<img src="img.jpg">
<img src="img.jpg" >
<script language="javascript">
for(i in document.images)document.images[i].ondragstart=imgdragstart
</script>
</body>
</html>
这个例子可以禁止拖动图片，你试试看
dragimgupload 用法如下：function DragImgUpload(id,options) {
this.me = $(id)
var defaultOpt = {
boxWidth:'135px',
boxHeight:'135px'
}
this.preview = $('#preview')
this.reset=$('×')
this.preview.append(this.reset)
this.opts=$.extend(true, defaultOpt,{
}, options)
this.init()
this.callback = this.opts.callback
}
//定义原型方法
DragImgUpload.prototype = {
init:function () {
this.me.append(this.preview)
this.me.append(this.fileupload)
this.eventClickInit()
this.resetImage()
this.cssInit()
},
cssInit:function () {
this.me.css({
'width':this.opts.boxWidth,
'height':this.opts.boxHeight,
'border':'1px solid #bbb',
'display': 'inline-block',
'cursor':'pointer',
'position': 'relative'
})
this.preview.css({
'height':'100%',
'overflow':'hidden',
})
this.reset.css({
'line-height': '20px',
'z-index': '999',
'background': 'rgba(0,0,0,.4)',
'color': '#fff',
'position': 'absolute',
'top': '0',
'right': '0',
'height': '25px',
'width': '30px',
'border-bottom-left-radius':'92%',
'text-align': 'center',
'font-size':'20px',
'display':'none'
})
},
onDragover:function (e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
onDrop:function (e) {
var self = this
e.stopPropagation()
e.preventDefault()
var fileList = e.dataTransfer.files
if(fileList.length == 0){
return false
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片！")
return false
}
//拖拉图片到浏览器，可以实现预览功能
var img = window.URL.createObjectURL(fileList[0])
var filename = fileList[0].name//图片名称
var filesize = Math.floor((fileList[0].size)/1024)
if(filesize>500){
alert("上传大小不能超过500K.")
return false
}
self.me.find("img").attr("src",img)
self.me.find("img").attr("title",filename)
if(this.callback){
this.callback(fileList)
}
},
eventClickInit:function () {
var self = this
self.reset.css({
'display':'block'
})
this.me.unbind().click(function () {
self.createImageUploadDialog()
})
var dp = this.me[0]
dp.addEventListener('dragover', function(e) {
self.onDragover(e)
})
dp.addEventListener("drop", function(e) {
self.onDrop(e)
})
},
onChangeUploadFile:function () {
var self = this
var fileInput = this.fileInput
var files = fileInput.files
var file = files[0]
var img = window.URL.createObjectURL(file)
var filename = file.name
this.me.find("img").attr("src",img)
this.me.find("img").attr("title",filename)
self.reset.css({
'display':'block'
})
if(this.callback){
this.callback(files)
}
},
createImageUploadDialog:function () {
var self = this
var fileInput = this.fileInput
if (!fileInput) {
//创建临时input元素
fileInput = document.getElementById('file')
// fileInput = document.createElement('input')
//设置input type为文件类型
// fileInput.type = 'file'
//设置文件name
// fileInput.name = 'file'
//允许上传多个文件
fileInput.multiple = true
fileInput.onchange = this.onChangeUploadFile.bind(this)
this.fileInput = fileInput
self.reset.css({
'display':'block'
})
}
//触发点击input点击事件，弹出选择文件对话框
fileInput.click()
},
resetImage:function(){
var self = this
this.reset.click(function(e){
e.stopPropagation()
var imgReset=self.me.find("img")[0]
console.log('图片',imgReset.src)
imgReset.src='/alink-hq/static/img/upload.png'
self.reset.css({
'display':'none'
})
})
}
}
鼠标悬浮时显示大图
$(function(){
var dragImgUpload = new DragImgUpload("#drop_area", {
callback: function (files) {
//回调函数，可以传递给后台等等
var file = files[0]
console.log(file.name)
}
})
$('#drop_area').on({
mouseover: function () {
var imgUrl = $(this).find('img')[0].src
$('#img-max').attr('src', imgUrl)
},
mouseout: function () {
var imgUrl = $(this).find('img')[0].src
$('#img-max').attr('src', '')
}
})
dragImgUpload.resetImage()
})
