Use JQuery EasyDrag to pop up a draggable Div, pass the value to the Div at the same time, and then return the selected value of the Div_jquery

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

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

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

My design is to first use the background code to loop through the header of this table to form the following string

1-Name--2-Age--3-Sex--4-Salary, store this string in hiddenfield, and then read it by JavaScript, dynamically add the html corresponding to the checkbox in the pop-up Div,

<

 

Then after selection, the selected value is formed into the corresponding string, for example: select Name, Age, Sex to form, 1-Name--2-Age--3Sex, Store it in another hidden field, read the selected string in the background code, and export the corresponding columns in the table to word.

At the same time, in order to make this pop-up page draggable, the EasyDrag jQuery Plugin is used, which can be downloaded from http://fromvega.com/wordpress/2007 /07/14/easydrag-jquery-plugin/Download.

This plug-in is very useful and simple,

                                                                                                                                                                                                        . .ready( function()
{

$("#divPanel").easydrag(); } ); Html code

Copy code


The code is as follows:

Title

EasyDrag can also specify the draggable area. For example, the entire div can only be dragged through the title. Our JS can write like this

Copy Code


The code is as follows:

$(document).ready ( function()
{

$("#divPanel").easydrag() ; $("#divPanel").setHandler("divTitle"); } );

Copy Code


The code is as follows:

New Web Project Page

Title

<br>

源代码下载