首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

Posted in Javascript onOctober 24, 2009

原来我们要写一个客户端的特效，要写一两天的JavaScript，然后再调试一两天，才可以看见端倪。现在我们只要使用JQuery和他的 plugin，就可以任意的实现我们脑海中的特效，感谢他们的编写者对人类的贡献（一百个西红柿砸过来。。。。。。。。。。。。。。）。

我今天实现的需求是一个需要从列表页面中选择要导出到word中的列，然后在将选中列的内容导出到word中，同时为了增加通用性，列的个数不是固定的，也就是说这张表格可能是4列，也可能是5列，待选择的列数目不固定。例如：有下面的一张表格，然后我们要打印除薪水外的其他列。

姓名 年龄 性别 薪水
张三 19 男 10000
张三 19 男 10000
张三 19 男 10000

 

      我的设计是先用后台代码循环这个表格的表头，组成下面的字符串

      1-Name--2-Age--3-Sex--4-Salary，将这个字符串存储在hiddenfield中，然后由JavaScript读取，动态在弹出Div中添加checkbox对应的html，

<利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

 

利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

 

     

利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

 

 

利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

然后在选择之后将选择的值组成对应的字符串，例如：选择Name、Age、Sex，就组成，1-Name--2-Age--3Sex，存放在另外的一个hiddenfield中，在后台代码读取这个选中的字符串，将表格中相应的列导出到word中。

同时为了使这个弹出页面可以拖动，使用了EasyDrag jQuery Plugin，可以从http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/下载。

      这个插件很好用，也很简单，

         实现拖动效果.

$(document).ready( function() 
{ 
$("#divPanel").easydrag(); 
} 
);

Html 代码 
<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" > 
<div id="divTitle" style="width:100%;height:25px;background:lavender"> 
 Title 
</div> 
<div style="width:100%"> 
</div> 
</div>

EasyDrag还可以指定可拖动的区域，比如只能通过标题拖动整个div，我们JS可以这样写 
$(document).ready ( function() 
{ 
$("#divPanel").easydrag(); 
$("#divPanel").setHandler("divTitle"); 
} 
);

<!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> 
<style type="text/css"> .pop-box { 
z-index: 9999; 
margin-bottom:3px; 
display:none; 
position:absolute; 
background:#ffffff; 
border:solid 1px #6e8bde; 
} 
.pop-box h4{ 
color:#ffffff; 
cursor:default; 
height:18px; 
font-size:14px; 
font-weight:bold; 
text-align:left; 
padding-left:8px; 
padding-top:4px; 
padding-bottom:2px; 
} 
.pop-box-body{ 
clear:both; 
margin:4px; 
padding:2px; 
} 
</style> 
<script type="text/javascript" src="script/jquery.js"> 
</script> 
<script type="text/javascript" src="script/jquery.easydrag.js"></script> 
<script typ="text/javascript"> 
$(document).ready(function(){ 
var text = "1-Name--2-Age--3-Sex--4-Salary"; 
var tokenGroup = new Array(); 
tokenGroup = text.split("--"); 
$(".optionDiv").append("<fieldset class='fieldset1'><legend class='legend1'>???╄?瀵煎?哄??ord涓?????/legend></fieldset>"); 
var obj = new Object(); 
for (obj in tokenGroup) { 
//alert(obj); 
//alert(Number(obj)); 
var index = Number(obj) + 1; 
//alert(index); 
var token = new Object(); 
token.value = tokenGroup[obj].split("-")[0]; 
token.text = tokenGroup[obj].split("-")[1]; 
//alert("value:"+token.value+" text:"+token.text); 
if (index == 1) { 
$(".legend1").after("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
else { 
$(".fieldset1").append("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
} 
}); 
$(document).ready(function(){ 
$(".btnSelect").click(function(){ 
var select = ""; 
$(".fieldset1 input").each(function(i){ 
if (this.checked) { 
if (select == "") 
select = (i + 1).toString() + "-" + $(this).next().text(); 
else 
select += "--" + (i + 1).toString() + "-" + $(this).next().text(); 
} 
}); 
$(".selected").val(select); 
}); 
$("#btnClose").click(function(){ 
var select = ""; 
$(".fieldset1 input").each(function(i){ 
if (this.checked) { 
if (select == "") 
select = (i + 1).toString() + "-" + $(this).next().text(); 
else 
select += "--" + (i + 1).toString() + "-" + $(this).next().text(); 
} 
}); 
$(".selected").val(select); 
}); 
}); 
$(document).ready(function(){ 
$(".pop-box").easydrag(); 
}); 
function loadText(){ 
var text = $(".hiddenfield1").val(); 
var tokenGroup = new Array(); 
tokenGroup = text.split("--"); 
$(".pop-box-body").html(""); 
$(".pop-box-body").append("<fieldset class='fieldset1'><legend class='legend1'>???╄?瀵煎?哄??ord涓?????/legend></fieldset>"); 
var obj = new Object(); 
for (obj in tokenGroup) { 
//alert(obj); 
//alert(Number(obj)); 
var index = Number(obj) + 1; 
//alert(index); 
var token = new Object(); 
token.value = tokenGroup[obj].split("-")[0]; 
token.text = tokenGroup[obj].split("-")[1]; 
//alert("value:"+token.value+" text:"+token.text); 
if (index == 1) { 
$(".legend1").after("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
else { 
$(".fieldset1").append("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
} 
} 
function popupDiv(div_id){ 
var div_obj=$("#"+div_id); 
var windowWidth=document.documentElement.clientWidth; 
var windowHeight=document.documentElement.clientHeight; 
var popupHeight=div_obj.height(); 
var popupWidth=div_obj.width(); 
$("<div id='mask'></div>").addClass("mask").width(windowWidth*0.99) 
.height(windowHeight*0.99).click(function(){ 
hideDiv(div_id); 
}).appendTo("body").fadeIn(200); 
div_obj.css({"position":"absolute"}) 
.animate({left:windowWidth/2-popupWidth/2,top:windowHeight/2-popupHeight/2,opacity:"show"},"show"); 
loadText(); 
} 
function hideDiv(div_id){ 
$("#mask").remove(); 
$("#"+div_id).animate({left:0,top:0,opacity:"hide"},"slow"); 
} 
</script> 
</head> 
<body> 
<h1>New Web Project Page</h1> 
<input class="hiddenfield1" type="hidden" value="1-Name--2-Age--3-Sex--4-Salary"> 
<input type="button" id="btnPopup" name="btnPopup" onclick="popupDiv('pop-div')" class="btnPopup" value="PopupDiv"> 
<div class="pop-box" style="width:300px" id="pop-div"> 
<h4>Title</h4> 
<div class="pop-box-body"> 
<p></p> 
</div> 
<div class="butonPanel" style="text-align:right;"> 
<input value="Close" id="btnClose" onclick="hideDiv('pop-div');" type="button"> 
</div> 
</div> 
<!--<div class="optionDiv"></div>--> 
<fieldset> 
<legend> 
</legend> 
</fieldset> 
<input type="button" id="button1" name="button1" class="btnSelect" value="selected"> 
<br> 
<textarea class="selected" rows="5" cols="50"> 
</textarea> 
</body> 
</html>

源代码下载

利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jQuery知识点整理
Jan 30 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
JS window.opener返回父页面的应用
Oct 24 #Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 #Javascript
javascript Keycode对照表
Oct 24 #Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 #Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 #Javascript
js文件中调用js的实现方法小结
Oct 23 #Javascript
struts2 jquery 打造无限层次的树
Oct 23 #Javascript
D1875(1) Grundig(1) S500(1) SANGEAN(1) 飞利浦(2) L4X25T(1) D1835(1) ATS-909X(1) 山进(2) S400(1)
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JavaScript DOM基础
2015/04/13 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python 整数越界问题详解
2019/06/27 Python
Python将string转换到float的实例方法
2019/07/29 Python
利用python实现逐步回归
2020/02/24 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python集合的新增元素方法整理
2020/12/07 Python
python实现图片转字符画
2021/02/19 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
学院书画协会部门职责
2013/11/28 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
信息管理应届生求职信
2014/03/07 职场文书
六一节目主持词
2014/04/01 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
小学安全教育主题班会
2015/08/12 职场文书
中学语文教学反思
2016/02/16 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby