基于jquery的鼠标拖动效果代码
字体：[ ] 类型：转载 时间：
因为鼠标没有拖动事件(按下鼠标并移动)，只有按下，抬起，移动
记得在之前的一个"拖动层"的随笔中，我实现拖动，是用的一个布尔变量,判断是否可以拖动某元素。 这两天看了一些东西，发现不需要设这个布尔变量; 实现过程： 按下鼠标的时候，给文档对象（当然也可以是别的DOM对象）的移动事件绑定一个处理函数，同时也给鼠标抬起时绑定一个解除的处理函数。
代码如下: //按下鼠标并移动时(拖动)，调用的函数； function startSelection(event){ …… } //解除移动时的处理函数； function cancelSelection() { $(document).unbind('mousemove', startSelection).unbind('mouseup', cancelSelection); 　　} //鼠标在按下时调用的函数 function imgMouseDown(event){ $(document).mousemove(startSelection).mouseup(cancelSelection); } $img.bind("mousedown",imgMouseDown)
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery简单的拖动效果实现原理及示例
字体：[ ] 类型：转载 时间：
本文为大家详细介绍下jQuery拖曵的简单实例，具体的实现思路及代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
代码如下: &!DOCTYPE html& &html& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&简单拖曵原理实例&/title& &style type="text/css"& #drag{width:400height:300background:url(/uploadfile/873.jpg);cursor:position:top:100left:100border:solid 1px #} h2{color:#background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40line-height:40margin:0;} &/style& &script src="/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&&/script& &script type="text/javascript"& $(function(){ /*--------------拖曳效果---------------- *原理：标记拖曳状态dragging ,坐标位置iX, iY * mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获} * mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值} * mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡} */ var dragging = var iX, iY; $("#drag").mousedown(function(e) { dragging = iX = e.clientX - this.offsetL iY = e.clientY - this.offsetT this.setCapture && this.setCapture();
}); document.onmousemove = function(e) { if (dragging) { var e = e || window. var oX = e.clientX - iX; var oY = e.clientY - iY; $("#drag").css({"left":oX + "px", "top":oY + "px"});
} }; $(document).mouseup(function(e) { dragging = $("#drag")[0].releaseCapture(); e.cancelBubble = }) }) &/script& &/head& &body& &div id="drag"& &h2&来拖动我啊&/h2& &/div& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Jquery实现自定义窗口随意的拖拽
字体：[ ] 类型：转载 时间：
点击一个按钮时，弹出一个自定义窗口，并且可以随意的拖拽，jquery也可以实现这样的功能，下面有个不错的示例，大家可以感受下
在网页上我们经常看到，当点击一个按钮时，弹出一个自定义窗口，并且可以随意的拖拽，从而改变其位置 使用jquery实现拖拽，则必须要jquery的文件了，实现步骤： 1、引入jquery文件 2、编写js脚本 具体代码： html代码：
代码如下: &button id="show"&显示&/button& &div class="win"& &div class="wTop"&&p style="float:margin:5px 5px 0px 0color:white" id="hidden"&X&/p&&/div& &div class="content"&&/div& &/div&
代码如下: &style type="text/css"& .win{width:500height:600background:#000000;border-radius:8box-shadow:0px 0px 5px 10opacity:0.8;position:left:0;top:0;display:none} .win .wTop{height:30width:100%;cursor:move} .win .content{height:570width:100%;border-radius:5background:white} &/style&
代码如下: &script language="javascript" type="text/javascript"& $(function(){ //拖拽 dragAndDrop(); //初始化位置 initPosition(); //点击按钮 clickShowBtn(); }); //拖拽 function dragAndDrop(){ var _move=//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".wTop").mousedown(function(e){ _move= _x=e.pageX-parseInt($(".win").css("left")); _y=e.pageY-parseInt($(".win").css("top")); //$(".wTop").fadeTo(20,0.5);//点击开始拖动并透明显示 }); $(document).mousemove(function(e){ if(_move){ var x=e.pageX-_x;//移动时鼠标位置计算控件左上角的绝对位置 var y=e.pageY-_y; $(".win").css({top:y,left:x});//控件新位置 } }).mouseup(function(){ _move= //$(".wTop").fadeTo("fast",1);//松开鼠标后停止移动并恢复成不透明 }); } //初始化拖拽div的位置 function initPosition(){ //计算初始化位置 var itop=($(document).height()-$(".win").height())/2; var ileft=($(document).width()-$(".win").width())/1.8; //设置被拖拽div的位置 $(".win").css({top:itop,left:ileft}); } //点击显示按钮 function clickShowBtn(){ $("#show").click(function(){ $(".win").show(1000); }); $("#hidden").click(function(){ $(".win").hide(1000); }); } &/script&
引入的js文件
代码如下: &script type="text/javascript" src="js/jquery-1.10.2.min.js"&&/script&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery实现简单的DIV拖动效果
作者：十月阳光
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery实现简单的DIV拖动效果,涉及jQuery针对鼠标事件的响应及页面元素的动态操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现简单的DIV拖动效果。分享给大家供大家参考，具体如下：
创建一个HTML文件，复制以下代码进去，修改jquery文件（没有的到网上去下一个，我使用的是jquery-1.8.2），即可以运行了
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&Jquery：鼠标拖动DIV&/title&
&style type="text/css"&
div#computerMove{
line-height:30
background-color:#00CCCC;
text-align:
color:#FFFFFF;
&div id="computerMove"&点击我拖动&/div&
&script src="jquery-1.8.2.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(document).ready(function(){
var $div = $("div#computerMove");
/* 绑定鼠标左键按住事件 */
$div.bind("mousedown",function(event){
/* 获取需要拖动节点的坐标 */
var offset_x = $(this)[0].offsetL//x坐标
var offset_y = $(this)[0].offsetT//y坐标
/* 获取当前鼠标的坐标 */
var mouse_x = event.pageX;
var mouse_y = event.pageY;
/* 绑定拖动事件 */
/* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
$(document).bind("mousemove",function(ev){
/* 计算鼠标移动了的位置 */
var _x = ev.pageX - mouse_x;
var _y = ev.pageY - mouse_y;
/* 设置移动后的元素坐标 */
var now_x = (offset_x + _x ) + "px";
var now_y = (offset_y + _y ) + "px";
/* 改变目标元素的位置 */
$div.css({
top:now_y,
left:now_x
/* 当鼠标左键松开，接触事件绑定 */
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js拖拽，jquery拖拽实现和demo
实现拖拽一般需要一下步骤:
1、让元素捕获事件（一般情况下，无非就是mousedown、mousemove、mouseup)
2、在mousedown时，标记开始拖拽，并获取元素及鼠标的位置。
3、在mousemove时，不断的获取鼠标的新位置，并通过相应的位置算法，来重新定位元素位置。
4、在mouseup时，结束拖拽。。。然后周而复始。
这中间，个需要注意的地方：被拖拽的元素，至少需要相对或绝对定位，否则拖拽不会有效果。
function drag(dragDiv,tagDiv){
//传入拖拽发生id和被拖拽id，如果相同，则本体就是按钮和拖拽对象
var dragDiv = document.getElementById(dragDiv);
var tagDiv = document.getElementById(tagDiv);
var tagContainer =
var e,offsetT,offsetL,downX,downY,moveX,moveY;
dragDiv.onmouseover = function(e){
this.style.cursor = &move&;
dragDiv.onmousedown = function(e){
e = e||window.
offsetT = tagDiv.offsetT
offsetL = tagDiv.offsetL
downX = e.clientX;
downY = e.clientY;
dragDiv.onmouseup = function(e){
tagContainer.onmousemove = function(){}
tagContainer.onmousemove = function(e){
e = e||window.
moveX = e.clientX;
moveY = e.clientY;
tagDiv.style.top = offsetT + (moveY - downY) + &px&;
tagDiv.style.left = offsetL + (moveX - downX) + &px&;
使用只需要：drag(“拖拽id”,”拖拽的divid”);
这个方法可以用在比较简单的网页特效上，自己可以根据需求变动。
demo查看：
拖拽（插件）：
(function($)
$.extend({
//获取鼠标当前坐标
mouseCoords:function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};}
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop
- document.body.clientTop
//获取样式值
getStyle:function(obj,styleName)
return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
// 元素拖拽插件
$.fn.dragDrop = function(options)
var opts = $.extend({},$.fn.dragDrop.defaults,options);
return this.each(function(){
//是否正在拖动
var bDraging =
//移动的元素
var moveEle = $(this);
//点击哪个元素，以触发移动。
//该元素需要是被移动元素的子元素（比如标题等）
var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveE
if(!focuEle || focuEle.length&=0)
alert('focuEle is not found! the element must be a child of '+this.id);
// initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
// moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
// 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};
//被移动元素，需要设置定位样式，否则拖拽效果将无效。
moveEle.css({'position':'absolute','left':'0','top':'0'});
//点击时，记录鼠标位置
//DOM写法： getElementById('***').onmousedown= function(event);
focuEle.bind('mousedown',function(e){
//标记开始移动
bDraging =
//改变鼠标形状
moveEle.css({'cursor':'move'});
//捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
if(moveEle.get(0).setCapture)
moveEle.get(0).setCapture();
//（实际上是鼠标当前位置相对于被移动元素原点的距离）
// DOM写法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.
dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().
dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().
//移动过程
focuEle.bind('mousemove',function(e){
if(bDraging)
//被移动元素的新位置，实际上鼠标当前位置与原位置之差
//实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。
dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
//是否限定在某个区域中移动.
//fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
if(opts.fixarea)
if(dragParams.moveX&opts.fixarea[0])
dragParams.moveX=opts.fixarea[0]
if(dragParams.moveX&opts.fixarea[1])
dragParams.moveX=opts.fixarea[1]
if(dragParams.moveY&opts.fixarea[2])
dragParams.moveY=opts.fixarea[2]
if(dragParams.moveY&opts.fixarea[3])
dragParams.moveY=opts.fixarea[3]
//移动方向：可以是不限定、垂直、水平。
if(opts.dragDirection=='all')
//DOM写法： document.getElementById('***').style.left = '***px';
moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
else if (opts.dragDirection=='vertical')
moveEle.css({'top':dragParams.moveY});
else if(opts.dragDirection=='horizontal')
moveEle.css({'left':dragParams.moveX});
//如果有回调
if(opts.callback)
//将dragParams作为参数传递
opts.callback.call(opts.callback,dragParams);
//鼠标弹起时，标记为取消移动
focuEle.bind('mouseup',function(e){
moveEle.css({'cursor':'default'});
if(moveEle.get(0).releaseCapture)
moveEle.get(0).releaseCapture();
//默认配置
$.fn.dragDrop.defaults =
focuEle:null,
//点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
callback:null,
//拖动时触发的回调。
dragDirection:'all',
//拖动方向：['all','vertical','horizontal']
fixarea:null
//限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
})(jQuery);
使用方法记得配合。可以查看下面的demo：
$(function(){
//限定区域，有回调函数。
$('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
//默认设置
$('#dragDiv1').dragDrop();
demo查看和下载：
Related content:
本文固定链接:
【上一篇】【下一篇】
微信热门网赚系统
博客微信号
日志总数：615 篇
评论总数：4186 篇
标签数量：407 个
链接总数：12 个
建站日期：
运行天数：2023 天
最后更新：