jQuery实现的简单拖拽功能示例【测试可用】


Posted in jQuery onAugust 14, 2018

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

<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>3water.com jQuery拖拽</title>
    <style type="text/css">
      #box{
        position:fixed;
        left:100px;
        top:100px;
        background-color:red;
        width:300px;
        height:200px;
      }
      #out{
        height:2000px;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        var drafting=false; 
        var offX,offY,mouseX,mouseY,winX,winY,x,y;
        $("#box").mousedown(function(event){
          event.stopPropagation();
          drafting=true;
        });
        $(document).mousemove(function(event){
          event.stopPropagation();
          var e=event||window.event;
          mouseX=e.pageX||e.clientX+$(document).scrollLeft();
          mouseY=e.pageY||e.clientY+$(document).scrollTop();
          winX=$("#box").offset().left-$(document).scrollLeft();
          winY=$("#box").offset().top-$(document).scrollTop();
          if(drafting==false){
            offX=mouseX-winX;
            offY=mouseY-winY;
          }
          x=mouseX-offX;
          y=mouseY-offY;
          $("#box").css({'left':x,'top':y});
        });
        $(document).mouseup(function(event){
          event.stopPropagation();
          drafting=false;
        });  
      });
    </script>
  </head>
  <body>
    <div id="box"></div>
    <div id="out"></div>
  </body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试效果:

jQuery实现的简单拖拽功能示例【测试可用】

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
jQuery中$原理实例分析
Aug 13 #jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python访问纯真IP数据库的代码
2011/05/19 Python
python安装以及IDE的配置教程
2015/04/29 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
初三家长会邀请函
2014/01/18 职场文书
应届毕业生自荐书
2014/06/18 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
水浒传读书笔记
2015/06/25 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
重阳节主题班会
2015/08/17 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
python字典的元素访问实例详解
2021/07/21 Python