html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下
body{
text-align: center;
}
.container{
display: flex;
justify-content: center;
}
.colorBox{
width: 100px;
height: 100px;
border:1px solid gray;
margin: 0 20px;
}
.showBox{
width: 100px;
height: 100px;
border:5px dashed gray;
margin: 0 auto;
}
.colorBox:nth-child(1){
background-color: orange;
}
.colorBox:nth-child(2){
background-color: skyblue;
}
.colorBox:nth-child(3){
background-color: yellowgreen;
}
img{
border: 1px solid gray;
margin:0 20px;
}
支持拖拽的元素
需要开启拖拽的元素
展示框
// 定义全局变量 保存 拖放元素
var moveDom ;
// 让元素 能够被 拖放的内容 丢进去
document.querySelector('.showBox').ondragover = function (e){
//防止浏览器默认行为(W3C)
e.preventDefault();
}
// 拖放元素 丢到 容器内 会触发 ondrop事件
// 如果没有在 ondragover中 阻止默认行为 那么 无法触发 ondrop事件
document.querySelector('.showBox').ondrop = function (){
//console.log(moveDom);
if(moveDom.src){
// 如果 src有值 那么设置src属性
// 获取 moveDom的src属性 并赋值给 盒子即可
this.style.background = 'url('+moveDom.src+')no-repeat center/cover';
}else{
// 如果src没有值 那么 设置背景颜色
// console.log(moveDom);
// console.log(moveDom.style.backgroundColor);
// 该方法 返回的内容是 style属性
// getComputedStyle 能够获取 style标签中 写的样式
console.log(window.getComputedStyle(moveDom).backgroundColor);
this.style.backgroundColor = window.getComputedStyle(moveDom).backgroundColor;
}
}
// 当我们开始拖放元素的时候 会触发 ondragstart事件
var imgs = document.querySelectorAll('img');
for (var i=0;i
imgs[i].ondragstart = function (){
moveDom = this;
}
}
// 为div绑定拖拽开始事件
var colorBoxs = document.querySelectorAll('.colorBox');
for (var i=0;i
colorBoxs[i].ondragstart = function (){
moveDom = this;
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html设置图片不可拖拽,js css3实现图片拖拽效果相关推荐
- php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
- 简单图片自动手动播放html,js手动播放图片实现图片轮播效果
本文实例为大家分享了js图片轮播具体实现代码,供大家参考,具体内容如下 一.html代码部分(et.thtml): 二.css代码部分(styleet,css): #main span{ width: ...
- html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS实现马赛克图片效 ...
- css3动画图片旋转绕轴,css3图片旋转如何实现?css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
- js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片 轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
- 如何让图片自动旋转html5,图片旋转特效 纯HTML5+CSS3制作图片旋转
transform的四个属性: ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针. ②缩放--->scale(参数a),单位1,也就是"没有 ...
- 旋转图片轮播html,js实现旋转图片轮播
2018-08-18 话不多说,直接上代码 html: css: * { margin: 0; padding: 0; } body { background: #000; overflow: hid ...
- 把鼠标放到图片后,(HTML+JS实现)静态图片变成动态图
前几天有个朋友问我这个问题:如何实现"把鼠标放到图片后,变成动态图",他估计是没学过JavaScript,其实这个问题实现起来还是挺简单的.下面简单说下: 原图片放静态图,为图片设 ...
- css 波纹扩散_html5 +css3 点击后水波纹扩散效果 兼容移动端
html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
最新文章
- linux sntp 代码,C语言window(linux)平台的SNTP实现
- 电脑安装python为什么显示的是程序丢失-python报错:无法启动此程序,因为计算机中丢失...
- 挖掘管理价值:企业软件项目管理实战
- xshell 安装yum_Xshell上面简单安装docker
- 《个体软件过程》—第1章1.1节什么是软件工程
- 解决webview调用 goBack() 返回上一页自动刷新闪白的情况
- MOV及MP4文件格式中几个重要的Table
- 拼图项目的动机和目标
- python网页填表教程_PythonSpot 中文系列教程 · 翻译完成
- mtk pwmlinux timer
- TensorFlow2.0(十一)--理解LSTM网络
- 机器学习基础:K近邻算法(Machine Learning Fundamentals: KNN)
- 卡通图像变形算法(Moving Least Squares)附源码
- 对于有Id,ParentId,Name这样类型字段的表的一个sql查询
- sql sever 插入数据
- php自定义表单 系统,PHP自定义表单系统Php综合源码下载-华软网
- 手机刷机后丢失照片恢复怎么做到?
- gitlab提交代码到develop分支
- Linq to sql 求和操作
- mysql 中的select,from,where,group by等 关键字 执行顺序与别名问题
热门文章
- 设计模式的理解 : 门面模式、外观模式 (Facade)
- Java垃圾回收(GC)、找垃圾的方式、GC Root、GC停顿、引用、垃圾收集算法、收集器、GC日志、安全点、安全区域
- 启明云端分享|AIOT+智慧屏解决方案,用色彩渲染智慧生活
- couchdb 自动生成html,如何在CouchDB中使用html模板
- oracle一个表更新另一个表多列,oracle sql更新表中多列值,值是从其它表中查询(select)得出...
- iap升级问题 stm32f103r8_STM32的基于串口的IAP固件升级与加密
- html 抓取 post 请求,javascript – 获取HTML Form Post方法的返回值
- css 添加 referer,http中Referer和Referrer Policy
- 怎么用python实现回归_Python使用sklearn实现的各种回归算法示例
- MS CRM 2011中的新特性(1)——界面部分