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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
在vue中使用Base64转码的案例
Aug 07 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
用jquery来定位
2007/02/20 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
对javascript继承的理解
2016/10/11 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python 变量初始化空列表的例子
2019/11/28 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
自我评价格式
2014/01/06 职场文书
培训研修方案
2014/06/06 职场文书
关于环保的标语
2014/06/13 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
2014年秘书工作总结
2014/11/25 职场文书
军训通讯稿范文
2015/07/18 职场文书
护士工作心得体会
2016/01/25 职场文书