jquery实现很简单的DIV拖动
今天用jquery实现了一个很简单的拖动...实现思路很简单 如下:
在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:
var x = event.clientX - (document.documentElement.clientWidth - 620) / 2 - event.offsetX;
var y = event.clientY - (document.documentElement.clientHeight - 465) / 2 - event.offsetY;
$(".pdivt .divnei").css("left", x);
$(".pdivt .divnei").css("top", y);
event.offsetX eventoffsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
event.clientX 获取鼠标的水平位置
event.clientY 获取鼠标的垂直位置
ousedown事件在鼠标在元素上点击后会触发mousemove 事件通过鼠标在元素上移动来触发mouseout事件在鼠标从元素上离开后会触发<style>
#Drigging
{
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="../js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
var bool=false;
var offsetX=0;
var offsetY=0;
$("#Drigging").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$(this).css('cursor','move');
})
.mouseup(function(){
bool=false;
})
$(document).mousemove(function(e){
if(!bool)
return;
var x = event.clientX-offsetX;
var y = event.clientY-offsetY;
$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
})
})
</script> offsetParent:http://www.cnblogs.com/jilleanwong/archive/2008/09/21/1295415.htmloffsetLeft、offsetTop、offsetWidth、offsetHeight属性http://www.cnblogs.com/jilleanwong/archive/2008/09/22/1295783.html
jquery实现很简单的DIV拖动的更多相关文章
- jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法
故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...
- JQuery asp.net 简单入门
1.A标签 <a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a> <a href ...
- asp.net MVC3 + JQuery 的ajax简单使用
一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单 这里先记下来,以后使用时可以再拿着用. 本应用中,本来是准备使用长 ...
- jquery编写的简单日历
以前在开发web页面的时候遇到日历,都是直接引入一些日历组件来用,一直不太明白实现原理,总感觉挺复杂的. 今天尝试着用jquery写了一个简单的日历功能,可以选择年份,月份,返回今天,原来简单的日历功 ...
随机推荐
- PHP 之 Laravel 框架安装及相关开源软件
Laravel 被称为简洁.优雅的PHP开发框架,但第一次接触此框架的人有不少都卡在了安装上,其实在 Linux 下只需要很简单的几步就可以搞定,这里我们以 CentOS 下 PHP + Nginx ...
- tomcat 系统架构与设计模式 第二部分 设计模式 转
Tomcat 系统架构与设计模式,第 2 部分: 设计模式分析 许 令波, Java 开发工程师, 淘宝网 许令波,现就职于淘宝网,是一名 Java 开发工程师.对大型互联网架构设计颇感兴趣,并对一些 ...
- 把这两天遇到的码(e)农(xin)题记下来
1019: [SHOI2008]汉诺塔 1858: [Scoi2010]序列操作 1058: [ZJOI2007]报表统计
- Maven学习(1) - Maven入门
home index:http://maven.apache.org/ download:http://maven.apache.org/download.cgi install: http://ma ...
- org.springframework.web.servlet.view
view包下面的类和接口 description:提供view和viewResolver的标准实现,也提供一些抽象基类.Spring MVC已经提供了 JSPs, Velocity, XSLT等视图的 ...
- 从 3 个 IT 公司里学到的 57 条经验
自1999年起我就开始发掘一些科技公司,并帮助它们运营.下面是从干这行中得到的57条经验.我可以列出更多,但恐怕会令你厌烦. 1.做你个人有热情的事情.你是你自己最好的民意代表. 2.用户体验很重要. ...
- ubuntu下使用ngrok外网映射
好久之前想搞明白这个事情,可是就是不知道这个词叫外网映射,所以也一直不知怎么做,在慕课网看用java开发微信公众号的时候教程里提到了外网映射,查了一些资料终于把本地给映射到外网了,直接变成了80端口, ...
- Unity-layermask的问题
using UnityEngine; using System.Collections; public class NewBehaviourScript : MonoBehaviour { priva ...
- 《University Calculus》-chaper13-多重积分-二重积分的计算
之前关于二重积分的笔记,介绍了二重积分概念的引入,但是对于它的计算方法(化为累次积分),介绍的较为模糊,它在<概率论基础教程>中一系列的推导中发挥着很重要的作用. 回想先前关于二重积分的几 ...
- effective C++ 读后笔记
首先不得不说侯捷翻译的书大部分我都很喜欢,因为侯捷本身是一名出色的C++技术专家.这本书讲的是C++如何高效的运行,我想要成为一名卓越的开发人员,代码的高效性是必不可少的.很多人的代码质量很差,即使能 ...