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

2019-11-20 09:01:21

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

效果图如下：