jQuery實(shí)現(xiàn)的簡單拖拽功能示例

2019-11-20 09:01:21

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡單拖拽功能。分享給大家供大家參考，具體如下：

<!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、按下鼠標(biāo)左鍵  //2、移動鼠標(biāo)  $('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>

效果圖如下：