jq怎么实现像红心大战那样随意jq 拖动div摆放的效果

jQuery制作table表格布局插件带有列左右拖动效果
下载资源()次
阅读次数()次
发布时间:
用法简介:
jQuery制作table表格布局插件带有列左右拖动效果。jq代码展示:&script&src=&libs/jquery.js&&&/script&
&script&src=&libs/store.js&&&/script&
&script&src=&dist/jquery.resizableColumns.min.js&&&/script&
$(function(){
&&$(&table&).resizableColumns({
store:&store
相关标签:
网友评论:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!
二、互相尊重,对自己的言论和行为负责。
什么是邮箱订阅?
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。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
最近更新的内容
常用在线小工具提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置:& >
jQuery自由拖拽摆放可控制方向和区域
内容介绍今天我们要来分享一款很实用的,它可以自由地拖拽网页上的任意元素,更不错的是,我们可以控制其拖拽的方向,比如只允许水平拖拽和只允许垂直拖拽,另外,也可以设置拖拽的hander,即鼠标在某区域是触发拖拽事件。
下载资源:258 次
下载积分:0 积分
转载请注明(B5教程网)原文链接:
网友评论:}

我要回帖

更多关于 jq实现鼠标拖动div 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信