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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 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面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
详解javascript函数的参数
2015/11/10 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
Python Queue模块详解
2014/11/30 Python
Python类定义和类继承详解
2015/05/08 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
招商经理岗位职责
2013/11/16 职场文书
初三物理教学反思
2014/01/21 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
六年级学生期末评语
2014/12/26 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle