javascript拖拽效果延伸学习


Posted in Javascript onApril 04, 2016

本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下

1.实现拖拉图片时,带框的效果。即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型。

这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象。

直接上代码:

<html
<head>
<style>
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()//凡是被拖拽的物体,其必须定位为absolute
{
  var oDiv=document.getElementById('div1');
  oDiv.onmousedown=function (ev)
  {
    var oEvent=ev||event;
    var disX=oEvent.clientX-oDiv.offsetLeft;
    var disY=oEvent.clientY-oDiv.offsetTop;

    var oNewDiv=document.createElement('div');
    oNewDiv.className='box';
    oNewDiv.style.width=oDiv.offsetWidth-2+'px';//将2px的边框去掉
    oNewDiv.style.height=oDiv.offsetHeight-2+'px';
    
     oNewDiv.style.left=oDiv.offsetLeft+'px';
     oNewDiv.style.top=oDiv.offsetTop+'px';
    document.body.appendChild(oNewDiv);
    document.onmousemove=function (ev)
    {
      var oEvent=ev||event;
      oNewDiv.style.left=oEvent.clientX-disX+'px';
      oNewDiv.style.top=oEvent.clientY-disY+'px';
    };
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      document.body.removeChild(oNewDiv);
      oDiv.style.left=oNewDiv.style.left;
      oDiv.style.top=oNewDiv.style.top;
    };
  };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

2.关于窗口拖拉放大缩小的效果,就是在上面的div之中再包一个div。

<html
<head>
<style>
#div1 {width:10px; height:10px; background:url(images/1.gif); position:absolute;bottom: 0;right: 0}//拖拉的物体,改为图片
#div2{width: 200px;height: 200px;position: relative;background: #ccc;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()//凡是被拖拽的物体,其必须定位为absolute
{
  var oDiv=document.getElementById('div1');
   var oDiv2=document.getElementById('div2');
  oDiv.onmousedown=function (ev)
  {
    var oEvent=ev||event;
    var disX=oEvent.clientX-oDiv.offsetLeft;
    var disY=oEvent.clientY-oDiv.offsetTop;

    var oNewDiv=document.createElement('div');
    //oNewDiv.className='box';
    oNewDiv.style.width=oDiv.offsetWidth-2+'px';
    oNewDiv.style.height=oDiv.offsetHeight-2+'px';
    
     oNewDiv.style.left=oDiv.offsetLeft+'px';
     oNewDiv.style.top=oDiv.offsetTop+'px';
    document.body.appendChild(oNewDiv);
    document.onmousemove=function (ev)
    {
      var oEvent=ev||event;
      oDiv2.style.width=oEvent.clientX-disX+'px';//这里是它的父级
      oDiv2.style.height=oEvent.clientY-disY+'px';
    };
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      document.body.removeChild(oNewDiv);
      oDiv.style.left=oDiv2.style.left;
      oDiv.style.top=oDiv2.style.top;
    };
  };
};
</script>
</head>

<body>
<div id='div2'>
   <div id="div1">
   </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
javascript事件委托的用法及其好处简析
Apr 04 #Javascript
基于javascript制作微博发布栏效果
Apr 04 #Javascript
纯js实现手风琴效果
Apr 17 #Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 #Javascript
Angular 根据 service 的状态更新 directive
Apr 03 #Javascript
jQuery中的Deferred和promise 的区别
Apr 03 #Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
You might like
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python二元赋值实用技巧解析
2019/10/25 Python
pandas的resample重采样的使用
2020/04/24 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
网络工程师个人的自我评价范文
2013/10/01 职场文书
高中历史教学反思
2014/02/08 职场文书
党员自我评价2015
2015/03/03 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android