javascript拖拽效果延伸学习 - vip共享吧
  • 网站首页
  • IT技术笔记
    • Java教程
    • MySql数据库
    • PHP开发
    • Python教程
    • JavaScript
    • SEO优化
    • 常用工具
  • 好资源福利
    • 会员账号共享
  • 网站模板源码
    • 小程序源码
    • 网站源码
  • 共享网络资源
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 史上今日
    • 视频解析
    • 高清壁纸
    • 公告动态
    • 广告合作
    • 关于我们


导航菜单
  • 网站首页
  • IT技术笔记
    • Java教程
    • MySql数据库
    • PHP开发
    • Python教程
    • JavaScript
    • SEO优化
    • 常用工具
  • 好资源福利
    • 会员账号共享
  • 网站模板源码
    • 小程序源码
    • 网站源码
  • 共享网络资源
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 史上今日
    • 视频解析
    • 高清壁纸
    • 公告动态
    • 广告合作
    • 关于我们
javascript教程JavaScript

javascript拖拽效果延伸学习

2024/9/4 韩俊  JavaScript 365 0

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

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>

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

点赞:0 分享

上一篇
javascript事件委托的用法及其好处简析
下一篇
javascript制作照片墙及制作过程中出现的问题
作者头像 作者名称 作者性别
韩俊

热门推荐

1 javascript的正则匹配方法学习
2 JavaScript设计模式经典之命令模式
3 微信小程序如何实现打开第三方网页
4 实例详解ECMAScript5中新增的Array方法
5 EasyUi中的Combogrid实现分页和动态搜索远程数据
6 学习JavaScript设计模式之模板方法模式

评论列表

取消回复

    •  
      Login

      韩俊

      趁你现在还有时间,尽你自己最大的努力,努力做成你最想做的那件事,成为你最想成为的那种人,过着你最想过的那种生活。这个世界永远比你想的要更精彩,不要败给生活。

      退出登陆
      • 10358文章
      • 455评论
      • 80微语
  • 广告赞助

  • 二零二五年07月
    一二三四五六日
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   
  • 分类

    • 网站模板源码
    • IT技术笔记
    • 好资源分享
    • 共享网络资源
  • 最新文章

      • 祝贺孩子考学祝福语简短
        • 婚礼新郎祝福语简短励志
          • 嫁女结婚祝福语简短精辟
            • 祝医生节简短祝福语
              • 大童生日祝福语简短
                • 女孩参军祝福语大全简短
                  • 敬平辈祝福语简短霸气
                    • 经典的黄句子
  • 热门文章

    • 酷狗音乐VIP账号 酷狗音乐会员账号共享2017.01.29更新
    • 芒果tv vip会员账号 芒果tv会员账号共享2017.01.29更新
    • 爱奇艺vip账号 爱奇艺/PPS会员账号共享2016.12.12更新
    • 优酷/土豆vip会员账号 优酷会员账号共享2017.01.29更新
    • 活动:免费获得爱奇艺VIP/PPS会员账号50天以上的使用权!
    • 酷我音乐VIP账号 酷我音乐会员账号共享2016.12.31更新
    • 暴风影音会员账号 暴风影音会员账号共享2016.12.31更新
    • m1905会员账号 m1905会员账号共享2016.10.21更新
  • 最新评论

    • https://www.vipshare8.com/content/templates/meta/Static/images/tx/10.jpg

      你丫的 文章写得太好了 支持下!![F3...

    • https://www.vipshare8.com/content/templates/meta/Static/images/avatar.jpg

      很棒!刚在某网站看到这个,很欣赏,可惜下...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=3861064027

      呃呃呃 oooo

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了111:根据激活的时间有一年的有效期!

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=792480561

      到2025就到期了吗?

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      [blockquote]打卡时间:16:...

    • https://www.vipshare8.com/content/templates/meta/Static/images/tx/7.jpg

      俊哥,想借用迅雷一用!但需要手机验证!看...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=3293901900

      感谢大大的分享

    • https://www.vipshare8.com/content/uploadfile/202103/thum-490d1614564497.png

      回复了好奥v:如果没有解析成功,可以切换接口...

    • https://www.vipshare8.com/content/templates/meta/Api/qqtx.php/?qq=131241242441

      现在视频解析网站怎么用不了啦?

  • 网站统计 I 当前在线:853人

    • 本站管理:1位
    • 用户总数:593位
    • 置顶文章:2篇
    • 日志总数:10358篇
    • 微语总数:80条
    • 评论总数:455条
    • 标签总数:83条
    • 页面总数:8页
    • 分类总数:14个
    • 链接总数:16条
    • 运行天数:3725天
    • 最后更新:7月11日
    • 登录
    • 注册
    • 找回
    Copyright © 2025vip共享吧网站地图 网站备案豫ICP备19004194号-1

    免责声明:本站资源仅供用于学习和交流,本站部分素材内容来源于网络,如有侵权/投稿等,请及时联系站长.

    • 首页
    • 秒懂百科 秒懂百科
    • 搜索
    • 史上今日

    大家都在搜

    • javascript教程
    • 阴阳师
    • 网赚
    • 经典句子
    • 暴风影音会员账号
    • 开发工具
    • seo优化
    • 芒果tv会员
    • 酷我音乐VIP账号
    • qq音乐vip账号共享
    • 起点账号共享
    • 芒果视频
    • Java教程
    • Python
    • redis
    • 咪咕会员账号
    • 
    • 