jQuery,拖拽本文实例讲述了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常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》 希望本文所述对大家jQuery程序设计有所帮助。
jQuery,拖拽
|
