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 ui sortable拖拽后保存位置
Apr 27 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现图片放大镜效果
Dec 23 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中上传大体积文件时需要的设置
2006/10/09 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
javascript self对象使用详解
2016/10/18 Javascript
JavaScript实现区块链
2018/03/14 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python中map()函数的使用方法示例
2017/09/29 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
UNIX命令速查表
2012/03/10 面试题
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
银行竞聘报告范文
2014/11/06 职场文书
企业2014年度工作总结
2014/12/10 职场文书
怒海潜将观后感
2015/06/11 职场文书
贷款工作证明模板
2015/06/12 职场文书
亲戚关系证明
2015/06/24 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书