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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
jQuery事件详解
Feb 23 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 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调用mysql数据 dbclass类
2011/05/07 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP时间函数使用详解
2019/03/21 PHP
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
Jquery性能优化详解
2014/05/15 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python制作抽奖程序代码详解
2021/01/15 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
女性健康知识讲座通知
2015/04/23 职场文书