更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《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>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery拖拽</title>
<style type="text/css">
#box{
position:fixed;
left:100px;
top:100px;
background-color:red;
width:300px;
height:200px;
}
#out{
height:2000px;
}
</style>
<script src="http://www.auto-prest.com/uploads/allimg/190719/045641OY-0.jpg"></script>
<script>
$(document).ready(function(){
var drafting=false;
var offX,offY,mouseX,mouseY,winX,winY,x,y;
$("#box").mousedown(function(event){
event.stopPropagation();
drafting=true;
});
$(document).mousemove(function(event){
event.stopPropagation();
var e=event||window.event;
mouseX=e.pageX||e.clientX $(document).scrollLeft();
mouseY=e.pageY||e.clientY $(document).scrollTop();
winX=$("#box").offset().left-$(document).scrollLeft();
winY=$("#box").offset().top-$(document).scrollTop();
if(drafting==false){
offX=mouseX-winX;
offY=mouseY-winY;
}
x=mouseX-offX;
y=mouseY-offY;
$("#box").css({'left':x,'top':y});
});
$(document).mouseup(function(event){
event.stopPropagation();
drafting=false;
});
});
</script>
</head>
<body>
<div id="box"></div>
<div id="out"></div>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery拖拽div实现思路
- jQuery使用drag效果实现自由拖拽div
- JQuery之拖拽插件实现代码
- jQuery插件实现文件上传功能(支持拖拽)
- jquery实现拖拽调整Div大小
- jQuery实现的简单拖拽功能示例
- 基于jquery的一个拖拽到指定区域内的效果
- jquery拖拽排序简单实现方法(效果增强版)
- 基于jquery实现的鼠标拖拽元素复制并写入效果
效果图如下:
本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考,具体如下:
您可能感兴趣的文章:
- jQuery拖拽div实现思路
- jQuery使用drag效果实现自由拖拽div
- nba买球,JQuery之拖拽插件实现代码
- jQuery插件实现文件上传功能(支持拖拽)
- jquery实现拖拽调整Div大小
- 基于jquery的一个拖拽到指定区域内的效果
- jquery拖拽排序简单实现方法(效果增强版)
- 基于jquery实现的鼠标拖拽元素复制并写入效果
- jQuery实现的简单拖拽功能示例【测试可用】
本文由nba买球发布,转载请注明来源
关键词: