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

于 2015-04-15 16:16:10 发布
阅读量1k 收藏 1
点赞数
分类专栏： javascript 文章标签： easydrag jquery
本文介绍如何利用JQuery及其插件EasyDrag实现从网页表格中选择特定列并导出到Word的功能，包括动态生成复选框及拖拽弹窗等交互设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原来我们要写一个客户端的特效，要写一两天的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，

<

 

 

     

 

 


然后在选择之后将选择的值组成对应的字符串，例如：选择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'>閫夋嫨瑕佸鍑哄埌Word涓殑鍒?/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'>閫夋嫨瑕佸鍑哄埌Word涓殑鍒?/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.js史上最强大的拖拽插件
01-21
jquery.easyDrag.js史上最强大的拖拽插件
jquery.easydrag.js
12-04
使用方法： $("#divPanel").easydrag();
jquery插件 - EasyDrag 简单拖动栏
cuibinmo3519的博客
02-17 146
解决了EasyDrag这个Jquery插件没有指定拖动的handle的问题。这可是个大问题，尽管EasyDrag是个非常轻巧又实用的插件，但没有拖动的handle使我决定放弃它而选用臃肿的interface。那是多么痛苦的选择…...
EasyDrag
薄荷的Weblog
10-21 1629
首先要感谢木野狐，解决了EasyDrag这个Jquery插件没有指定拖动的handle的问题。这可是个大问题，尽管EasyDrag是个非常轻巧又实用的插件，但没有拖动的handle使我决定放弃它而选用臃肿的interface。那是多么痛苦的选择……EasyDrag可以指定DOM中某个元素，使其可以用鼠标进行拖放操作。假设DOM中有一个元素：Drag me…。那么这样让它支持拖放：$(”#b
jQuery插件EasyDrag轻松实现JS拖动的效果
weixin_34334744的博客
07-31 406
jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一、页面Html标签元素定义 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;页面...
利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值
10-29
标题中的“利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值”是指在一个Web应用中，使用JQuery库结合EasyDrag插件来创建一个可拖动的弹出Div，并且能够传递数据给这个Div，以及从Div...
使用jQuery的easydrag插件实现可拖动的DIV弹出框
11-23
标题中的“使用jQuery的easydrag插件实现可拖动的DIV弹出框”是指通过集成jQuery库和一个名为easydrag的插件，来创建一个可拖动的对话框（DIV元素）。这种技术常用于增强用户体验，让用户能够自由移动界面元素以适应...
使用JQuery+EasyDrag创建可拖动Div并传递、获取选中值
在实现这个功能的过程中，首先利用JQuery的便利性，配合EasyDrag插件，使得弹出的Div具备拖动功能。EasyDrag插件的使用方法是在文档加载完成后，通过`$(document).ready()`函数来绑定`easydrag`方法到指定的Div元素...
一行代码实现拖动效果的Jquery插件EasyDrag
在Web开发中，EasyDrag插件不仅限于拖动单一元素，也可以通过配置实现复杂的拖动场景，如列表项的拖动排序、拖拽文件上传等。这种灵活性使得JQuery插件EasyDrag成为前端开发中一个非常实用的工具。 总的来说，...
jquery.easydrag.handler.beta2.js
07-18
用法： $(“#box”).easydrag();//给指定的标签绑定拖动效果，也可以是Class $(“#box”).setHandler(‘handler’);//指定触发拖动的元素，download best apps for iphone 5handler是该元素的idhttp://www.newipadipa.com/ ，后面我们需要修改它 首先这个插件真的很好用（废话），短短2行代码就能让页面中的div动起来。但是如果要拖动很多div的时候 ，我们还是要稍微做出修改才能正常使用。 首先我的弹窗div在弹出的时候是默认在页面正中的，但是要使用这个插件被拖动的div就要使 用”position:absolute”的属性定位，这让我们的居中非常困难。解决思路：在触发弹窗之前用js获取当前屏 幕的分辨率然后将div居中。 js代码： { var div_width=Number(jQuery(‘#box’).css(‘width’)); var sc_width=(Number(window.screen.width)/2-(div_width/2)); //div距离浏览器左边框的距离为屏幕宽 度的一半-div宽度的一半 jQuery(‘#box).css(‘left’,sc_width); } 好了，初始化之后就是拖动了，如果需要拖动的div不多的话这样就可以了。但是我写的页面要拖动的div较多 ，而且这个插件只能用id号给元素绑定触发拖动的属性，如果一个id一个id的绑定事件的话会造成代码冗余 。所以我们要修改一下源文件jquery.easydrag.handler.beta2.js：找到 function(handlerId) 这个函数， 将里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧，这样就可以了，下面是实例，高手们请 无视好了。。。
Jquery插件EasyDrag一行代码实现拖动效果
10-30
Jquery插件EasyDrag一行代码实现拖动效果
jQuery拖拽插件drag.js
02-15
jQuery拖拽插件drag.js
Jquery插件EasyDrag拖动
06-03
Jquery插件EasyDrag拖动,这是一款非常实用的拖拽插件。推荐下载
扩展了 jquery 的插件 easy drag
木野狐@优快云 Blog
09-20 416
jquery 实现拖动的插件，试了几个，interface 是一个，但是 bug 太多，代码又复杂不好修改，就放弃了。今天找到了一个叫做 easydrag 的，但用了下也不灵活，于是扩充了一下，现在可以指定拖动的 handle.jquery.easydrag.js（以下绿色部分是我增加或修改的代码）：Code highlighting produced by Actipro CodeH
让页面中的DIV可以拖动-jQuery插件EasyDrag插件使用简介
mixer_a的专栏
05-26 214
文件：jquery.easydrag.handler.beta2.js 用法： $(“#box”).easydrag();//给指定的标签绑定拖动效果，也可以是Class $(“#box”).setHandler(‘handler’);//指定触发拖动的元素，handler是该元素的id，后面我们需要修改它 首先这个插件真的很好用（废话），短短2行代码就能让页面中的d...
扩展了 jquery 的插件 easy drag (转载 木野狐)
大米文子
06-02 396
扩展了 jquery 的插件 easy drag jquery 实现拖动的插件，试了几个，interface 是一个，但是 bug 太多，代码又复杂不好修改，就放弃了。今天找到了一个叫做 easydrag 的，但用了下也不灵活，于是扩充了一下，现在可以指定拖动的 handle.jquery.easydrag.js（以下绿色部分是我增加或修改的代码）：&lt;!--&lt;br&gt;&l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值