一、首先是jquery
<!-- 层的拖动 -->
<SCRIPT type="text/javascript">
jQuery(function($){
dragStart("canDragDiv");
});
//所有函数的参数‘id’为可拖动层的id
var MouseX = 0; //记录鼠标x轴坐标
var MouseY = 0; //记录鼠标y轴坐标
//开始拖动
function dragStart(id){
//绑定鼠标滑过事件
$("#"+id).bind("mouseover",function(){
//绑定鼠标按下事件
$("#"+id).bind("mousedown",function(){
MouseX = 0;
MouseY = 0;
doDrag(id);
});
});
//绑定鼠标松开事件
$("#"+id).bind("mouseup",function(){
dragEnd(id);
});
}
//拖动
function doDrag(id){
//绑定鼠标移动事件
$("#"+id).bind("mousemove",function(){
//记录鼠标x、y轴坐标
var x = event.clientX;
var y = event.clientY;
//记录拖动层x、y轴坐标
var dragDivX = $("#"+id).offset().left;
var dragDivY = $("#"+id).offset().top;
//得到上次鼠标坐标
if(MouseX != 0) {
x = MouseX;
}
if(MouseY != 0) {
y = MouseY;
}
//记录本次鼠标坐标
MouseX = event.clientX;
MouseY = event.clientY;
//记录鼠标偏移量
var moveX = MouseX - x;
var moveY = MouseY - y;
//移动层
$("#"+id).css("left",parseFloat(dragDivX) + parseFloat(moveX));
$("#"+id).css("top",parseFloat(dragDivY) + parseFloat(moveY));
});
}
//结束拖动
function dragEnd(id){
//注销鼠标移动事件
$("#"+id).unbind("mousemove");
$("#"+id).bind("mouseout",function(){
//注销鼠标按下事件
$("#"+id).unbind("mousedown");
});
}
</SCRIPT>
二、接着是javascript(这个非原创)
<!-- 层的拖拽功能 -->
<script type="text/javascript">
function beginDrag(id,event)
{
elementToDrag = document.getElementById(id);
//该元素当前位于何处
//该元素的样式性质必须具有left和top css属性
//此外,我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离,下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//注册mousedown事件后发生的mousemove和mouseup事件的处理程序
//注意,它们被注册为文档的捕捉事件处理程序
//在鼠标按钮保持按下的状态的时候,这些事件处理程序保持活动的状态
//在按钮被释放的时候,它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我们已经处理了该事件,不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
function upHandler(e)
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
</script>
分享到:
相关推荐
基于jquery,利用canvas自带的api,实现了一个鼠标点击对应点后,可拖动的一个插件
自己用js 写的拖拽div, 吸附window 边缘功能。
一个JQuery插件 - Javascript可拖动的模式窗口
mindex工作室,写得更少,做得更多。jquery实现的一款特效:鼠标拖拽改变块坐标。详细注释
一款JavaScript开发的弹出层,代码简洁,使用的漂亮弹出层 可拖动的弹出层 遮罩层。
jQuery实现事件轴拖拽功能.zip
jquery实现可拖动弹出层特效.zip
jquery弹出层可拖拽在线客服.zip
107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery...
jQuery点击弹出层可拖动代码.zip
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...
拖拽改变列宽的功能网上很多,但是拖拽改变行高的我搜了很久,也没有发现可以用的。所以利用原有改变行高的模版,自己写了一个原生javascrript改变列宽的模版。
jquery拖动图片移动拼图小游戏。使用jquery和javascript编写程序,移动拼图可直接玩耍
这次我们来分享一款非常实用的JS插件,它可以很方便地帮你实现在网页上拖拽图片并交换图片。和其他的拖拽插件不同,当两张图片交换时,将会出现弹动的动画特效。并且会改变被交换图片的背景颜色,以标识该图片被交换...
31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用...
jQuery拖动滑块时间轴选择日期代码.zip
JAVASCRIPT,JQUERY,AJAX鼠标拖动
用JQuery写的拖动元素进行排序的方法,包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件,自主可控。 原理是用CSS中position定位来跟踪鼠标移动,就是让元素跟踪鼠标位置,然后判断其在页面...
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸...
minde工作室,写得更少,做得更多。jquery实现的一款特效:鼠标拖拽改变块大小,详细注释