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 ready函数、css函数及text()使用示例
Sep 27 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
Node.JS如何实现JWT原理
Sep 18 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的控制语句
2006/10/09 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js中function()使用方法
2013/12/24 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
javascript回调函数详解
2018/02/06 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
饭店工作计划书
2014/01/10 职场文书
初中生自我评价
2014/02/01 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
实名检举信范文
2015/03/02 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书