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 相关文章推荐
Javascript的一种模块模式
Sep 08 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
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将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
php表单提交实例讲解
2015/11/12 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python Celery多队列配置代码实例
2019/11/22 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
如何在python中判断变量的类型
2020/07/29 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
个人委托书怎么写
2014/09/17 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python