jQuery实现的简单拖拽功能示例


Posted in Javascript onSeptember 13, 2016

本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
  padding: 0;
  margin: 0;
}
div{
  width: 100px;
  height: 100px;
  background: #f00;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
</head>
<body>
<div></div>
<script src="jquery.js"></script>
<script>
$(function(){
  //移动窗口的步骤
  //1、按下鼠标左键
  //2、移动鼠标
  $('div').mousedown(function(e){
    // e.pageX
    var positionDiv = $(this).offset();
    var distenceX = e.pageX - positionDiv.left;
    var distenceY = e.pageY - positionDiv.top;
    //alert(distenceX)
    // alert(positionDiv.left);
    $(document).mousemove(function(e){
      var x = e.pageX - distenceX;
      var y = e.pageY - distenceY;
      if(x<0){
        x=0;
      }else if(x>$(document).width()-$('div').outerWidth(true)){
        x = $(document).width()-$('div').outerWidth(true);
      }
      if(y<0){
        y=0;
      }else if(y>$(document).height()-$('div').outerHeight(true)){
        y = $(document).height()-$('div').outerHeight(true);
      }
      $('div').css({
        'left':x+'px',
        'top':y+'px'
      });
    });
    $(document).mouseup(function(){
      $(document).off('mousemove');
    });
  });
});
</script>
</body>
</html>

效果图如下:

jQuery实现的简单拖拽功能示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
简述JS控制台的使用
Jul 15 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
javascript实现计算器功能
Mar 30 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 #Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 #Javascript
JS实现页面数据无限加载
Sep 13 #Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 #Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 #Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 #Javascript
You might like
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
树结构之JavaScript
2017/01/24 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
详解Python进程间通信之命名管道
2017/08/28 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python实现微信打飞机游戏
2020/03/24 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
搞笑婚礼主持词
2014/03/13 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
项目合作协议书范本
2014/04/16 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
新党章心得体会
2014/09/04 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
先进教师事迹材料
2014/12/16 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书