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

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

<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun，可得到如下测试效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery页面元素操作技巧汇总》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • jQuery插件实现文件上传功能（支持拖拽）

    jQuery插件实现文件上传功能（支持拖拽）

    先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象.  var fr = new FileReader() 1.这个对象拥有五个方法: 下面附上一个例子:

  • jQuery拖拽div实现思路

    思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1.组件左上角与屏幕左上角的相对位置 2.鼠标所在坐标与组件左上角的相对位置. 具体函数如下: 复制代码 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 复制代码 代码如下: $(document).ready(function(){ var move=fal

  • JQuery之拖拽插件实现代码

    而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,这也算不上难点,毕竟两者都是基础的东西,关键在于熟练. 换到js 中,我们搞一个拖拽效果,大致有如下步骤: 1.让元素捕获事件(一般情况下,无非就是mouse

  • jQuery实现的简单拖拽功能示例

    jQuery实现的简单拖拽功能示例

    本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba

  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • 基于jquery的一个拖拽到指定区域内的效果

    这个可与前两个不同了,这个是拖拽到指定的区域内的特效.其实逻辑方式差不多,只不过不同的是 找到目标元素,用appendTo 的方法插入到目标元素. 具体的代码如下,有兴趣者可以试下.(由于是初学,做的简单,如果有其他的方法请给下指点,我定感激不尽哈...) 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • jquery拖拽排序简单实现方法(效果增强版)

    jquery拖拽排序简单实现方法(效果增强版)

    本文实例讲述了jquery拖拽排序简单实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title

  • jQuery使用drag效果实现自由拖拽div

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪.第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果.第三步是mouseup事件,鼠标弹

  • jquery实现拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 复制代码 代码如下: (function ($) {     $.fn.dragDivResize = function () {         var deltaX, deltaY, _startX, _startY;         var resizeW, resizeH;         var size = 20;         var minSize = 10;         var scroll

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

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

    本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net jQuery拖拽</title> <style type="t

  • AngularJS实现的简单拖拽功能示例

    本文实例讲述了AngularJS实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS拖拽</title> <style> *{ padding:0; margin:0; } .wei{ wi

  • JS实现的简单拖拽功能示例

    JS实现的简单拖拽功能示例

    本文实例讲述了JS实现的简单拖拽功能.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现拖拽</title> <style> #water{ width:400px; height:188px; background-color: #ff6600; } #water:hov

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • java swing中实现拖拽功能示例

    java swing中实现拖拽功能示例

    java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: 复制代码 代码如下: package com; import java.awt.*;import java.awt.datatransfer.DataFlavor;import java.awt.dnd.DnDConstants;import java.awt.dnd.DropTarget;import java.awt.dnd.DropTargetAdapter;import java.awt.dn

  • jQuery实现的简单前端搜索功能示例

    本文实例讲述了jQuery实现的简单前端搜索功能.分享给大家供大家参考,具体如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <div class="content-r

  • jQuery实现的简单歌词滚动功能示例

    jQuery实现的简单歌词滚动功能示例

    本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css  /* CSS Document */ * { margin: 0; padding: 0; font-size: 12px; } body { background: none; } input, button, select, textarea { outline: none; } ul, li, dl, ol { list-style: none; } a { colo

  • jQuery实现的简单对话框拖动功能示例

    jQuery实现的简单对话框拖动功能示例

    本文实例讲述了jQuery实现的简单对话框拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net jquery 拖动&

随机推荐