编程 Javascript

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程序设计有所帮助。

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

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

两个SUBMIT按钮，如何区分处理

Aug 22 Javascript

jQuery表格行换色的三种实现方法

Jun 27 Javascript

jquery实现勾选复选框触发事件给input赋值

Feb 01 Javascript

JavaScript中this详解

Sep 01 Javascript

jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

Aug 25 Javascript

在Docker快速部署Node.js应用的详细步骤

Sep 02 Javascript

基于iscroll.js实现下拉刷新和上拉加载效果

Nov 28 Javascript

微信小程序小组件基于Canvas实现直播点赞气泡效果

May 29 Javascript

关于axios不能使用Vue.use()浅析

Jan 12 Javascript

Vue写一个简单的倒计时按钮功能

Apr 20 Javascript

angular4自定义表单控件[(ngModel)]的实现

Nov 23 Javascript

js实现无限层级树形数据结构(创新算法)

Feb 27 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