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 相关文章推荐
常用js脚本
Dec 03 Javascript
js输出列表实现代码
Sep 12 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 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数组中包含中文的排序方法
2014/06/03 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
Yii清理缓存的方法
2016/01/06 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
js实现日历
2020/11/07 Javascript
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
俄罗斯游戏商店:Buka
2020/03/01 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
委托书范本
2014/09/13 职场文书
个人维稳承诺书
2015/05/04 职场文书
一个都不能少观后感
2015/06/04 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技