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 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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中curl和file_get_content的区别
2014/05/10 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
详解Scrapy Redis入门实战
2020/11/18 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
体育教育个人自荐信范文
2013/12/01 职场文书
采购部长岗位职责
2014/06/13 职场文书
单方投资意向书
2015/05/11 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang