jquery实现简单拖拽效果

本文实例为大家分享了jquery实现简单拖拽的具体代码，供大家参考，具体内容如下

基本思路：

1.首先需要鼠标按下拖动区域，也就是需要调用 mousedown 方法

2.鼠标移动，需要拖动的元素跟着鼠标移动，调用 mousemove 方法

3.鼠标弹起拖动消失，调用 mouseup 方法

下面看一下代码：

页面结构：

样式：

.drag {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  position: absolute;
}

效果图：

逻辑代码：

// 拖拽函数
function function_drag(ele) {
 $(ele).mousedown(function(e){
 // 获取鼠标离元素(0,0)位置的距离
 var positionDiv = $(this).offset(); //offset 元素的偏移坐标 有两个属性：top left（对显示的元素有用）
 var distenceX = e.pageX - positionDiv.left; //page 显示鼠标指针的位置  （此时相当于，鼠标按下的初始值）
 var distenceY = e.pageY - positionDiv.top; //

 // 鼠标移动
 $(document).mousemove(function(e){
  // 获取鼠标的位移（鼠标此时的page值 - 鼠标按下时的初始值 = 元素的移动值）
  var x = e.pageX - distenceX;
  var y = e.pageY - distenceY;
  if(x<0){
  x=0;
  }else if(x>$(document).width()-$(ele).outerWidth(true)){
  x = $(document).width()-$(ele).outerWidth(true);
  }
  if(y<0){
   y=0;
  }else if(y>$(document).height()-$(ele).outerHeight(true)){
   y = $(document).height()-$(ele).outerHeight(true);
  }
  $(ele).css({
  'left':x+'px',
  'top':y+'px'
  })
 })

 // 鼠标抬起
 $(document).mouseup(function(e){
  $(document).off('mousemove');
 })
 })
}
function_drag('.drag');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何使用jQuery Draggable和Droppable实现拖拽功能

    如何使用jQuery Draggable和Droppable实现拖拽功能

    在以前的文章中我已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明:1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素.父节点可以折叠起来 2.用户可以通过拖放的操作,将元素从左侧拖放到右侧.如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边 3.元素放到右侧,右侧可以接受元素的区域有2种可能.一种新建一个区域,就类似"华东交通大学"所示.另外一种就是拖放到已经有元素的区域.两者的关系是&quo

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

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

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

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

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

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

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

  • jQuery EasyUI API 中文文档 - Draggable 可拖拽

    用$.fn.draggable.defaults重写默认的defaults. 用法 复制代码 代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码 代码如下: $('#dd').draggable(

  • 简单的jquery拖拽排序效果实现代码

    步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.

  • 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

随机推荐