js css3实现图片拖拽效果


Posted in Javascript onMarch 04, 2017

本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      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;
      }
    </style>
  </head>

  <body>
    <!--h1{支持拖拽的元素}+img[src='images/lf.jpg']*3+h1{需要开启拖拽的元素}+div.colorBox*3+h1{展示框}+div.showBox-->
    <h1>支持拖拽的元素</h1>
    <img src="images/lf.jpg" alt="" />
    <img src="images/nm.jpg" alt="" />
    <img src="images/sl.jpg" alt="" />
    <h1>需要开启拖拽的元素</h1>
    <div class='container'>
      <!--添加开启拖拽属性-->
      <div class="colorBox" draggable="true"></div>
      <div class="colorBox" draggable="true"></div>
      <div class="colorBox" draggable="true"></div>
    </div>
    <h1>展示框</h1>
    <div class="showBox"></div>
  </body>

</html>
<script type="text/javascript">
  
  // 定义全局变量 保存 拖放元素
  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.length;i++) {
    imgs[i].ondragstart = function (){
      moveDom = this;
    }
  }
  
  
  // 为div绑定拖拽开始事件
  var colorBoxs = document.querySelectorAll('.colorBox');
  for (var i=0;i<colorBoxs.length;i++) {
    colorBoxs[i].ondragstart = function (){
      moveDom = this;
    }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 #Javascript
JavaScript中最常见的三个面试题解析
Mar 04 #Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 #Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 #Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 #Javascript
JS html时钟制作代码分享
Mar 03 #Javascript
AngularJS路由实现页面跳转实例
Mar 03 #Javascript
You might like
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
运动会入场词200字
2014/02/15 职场文书
董事长助理岗位职责
2014/02/18 职场文书
村委会换届选举方案
2014/05/03 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
教师听课评语大全
2014/12/31 职场文书
信访工作个人总结
2015/03/03 职场文书
聘任书的格式及模板
2019/10/28 职场文书