jQuery实现的跨容器无缝拖动效果代码
本文实例讲述了jQuery实现的跨容器无缝拖动效果。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link type = "text/css" href = "jquery-ui.css" rel = "stylesheet"/>
<style type = "text/css">
.EZ_SITE{width:990px; position: relative; margin:0px auto; top:30px;}
.EZ_SITE_HEADER{width:990px; position: absolute; height:80px; border:1px solid red;}
.ez_site_border{position: absolute; width:100%; height:100%; background-color:#000;}
.ez_site_background{position: absolute; width:100%; height:100%;background-color:#fff; margin:0px;}
.EZ_SITE_PAGE{width:990px; height:500px; position: absolute;top:82px;border:1px solid blue;}
.ez_page_content{width:100%; height:100%; position: absolute;}
.EZ_SITE_FOOTER{width:990px; position: absolute; height:80px; top:580px;border:1px solid green;}
#dragMe{
position:absolute;
top:100px;
left:100px;
width:100px;
height:50px;
border:1px solid green;
line-height:50px;
cursor:move;
text-align: center;
z-index:999;
background:#008800;
}
.box{
position:absolute;
top:100px;
left:300px;
width:300px;
height:200px;
border:1px solid blue;
line-height:200px;
cursor:move;
text-align: center;
z-index:990;
background:#ddd;
}
</style>
<script type = "text/javascript" src = "jquery-1.7.1.min.js"> </script>
<script type = "text/javascript" src="jquery-ui.js"> </script>
<script type = "text/javascript">
$(function(){
var obj = {
drop:function(e,ui){
var handle = ui.helper,
_left = handle.offset().left,
_top = handle.offset().top,
cleft = $(this).offset().left,
ctop = $(this).offset().top;
handle.appendTo($(this)).css({
left:_left-cleft,
top:_top-ctop
});
}
};
$("#addBox").click(function(){
var $box = $('<div class = "box">box</div>');
$box.appendTo($("#EZ_SITE_PAGE")).draggable().droppable(obj);
})
$("#dragMe,#box").draggable({
containment:"#EZ_SITE"
});
$(".ez_page_content,#box").droppable(obj);
})
</script>
</head>
<body>
<div id="EZ_SITE" class="EZ_SITE">
<div id="EZ_SITE_HEADER" class="EZ_SITE_HEADER">
<div class="ez_site_border">
<div class="ez_site_background"></div>
</div>
<div class="ez_page_content">
<div style="position: absolute; top:20px; left:30px;">这是一个网站标题</div>
<div style="position: absolute; top:20px; left:300px;" class="mk-element-navigation">
<a href="javascript:;" id="index">主页</a>
<a href="javascript:;" id="product">产品</a>
</div>
</div>
</div>
<div id="EZ_SITE_PAGE" class="EZ_SITE_PAGE">
<input type = "button" value = "添加容器" id = "addBox"/>
<div class="ez_site_border" style="height:500px;">
<div class="ez_site_background"></div>
</div>
<div id="index" class="ez_page_content" style="opacity: 1;" current="true">
<div style="position: absolute; top:20px; left:30px; font-weight: bold;">这是一个主页面</div>
<div id = "dragMe">dragMe</div>
</div>
</div>
<div id="EZ_SITE_FOOTER" class="EZ_SITE_FOOTER">
<div class="ez_site_border">
<div class="ez_site_background"></div>
</div>
<div class="ez_page_content">
<div style="position: absolute; top:20px; left:30px;">这里是页脚</div>
</div>
</div>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery 图片缩放拖动的简单实例
一.不使用jquery,简单的缩放: 复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Coun
-
jQuery实现移动端滑块拖动选择数字效果
本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"
-
jQuery实现360°全景拖动展示
CSS 复制代码 代码如下: html,body{background:#333;} #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;} #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;} #demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;wid
-
jQuery实现拖动调整表格单元格大小的代码实例
jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style ty
-
使用jQuery的easydrag插件实现可拖动的DIV弹出框
EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件. 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV弹出框</title> <style> /* 重置
-
jQuery动态添加可拖动元素完整实例(附demo源码下载)
本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&
-
jQuery拖动div、移动div、弹出层实现原理及示例
代码演示: http://www.imqing.com/demo/movediv.html 大概原理: 使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup. 在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置.即: left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) to
-
jquery实现可拖动DIV自定义保存到数据的实例
看到一个不错的jquery插件,可拖动DIV,顺序可保存到数据库的一个实例:这里就以其中PHP实例简单说明一下: 复制代码 代码如下: <?php //post到后台的数据 if ($_POST) { $ids = $_POST["ids"]; for ($idx = 0; $idx < count($ids); $idx+=1) { $id = $ids[$idx]; $o
-
jquery div拖动效果示例代码
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
jQuery实现DIV层淡入淡出拖动特效的方法
本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 { position:absolute; width:400px; height:300px; border
-
JQuery 表格操作(交替显示、拖动表格行、选择行等)
JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!-- $(function(){ //交替显示行 $('#alternation').click(function(){ $('tbody > tr:odd', $('#example')).toggleClass('alternatio
-
jquery拖动层效果插件用法实例分析(附demo源码)
本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!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" dir="l