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 - 如何引入js代码
Mar 09 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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 高手之路(三)
2006/10/09 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
Javascript验证方法大全
2015/09/21 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
理解Python中函数的参数
2015/04/27 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
python在非root权限下的安装方法
2018/01/23 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
献爱心活动总结
2014/05/07 职场文书
大学专科求职信
2014/07/02 职场文书
四风查摆剖析材料
2014/10/10 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python