Use JQuery + EasyDrag to bring up a drag-and-drop Div, and pass the value to the Div, and then return the selected value of the Div _ jquery

JQuery is an excellent Javascript class library, so we once hated JavaScript and liked JavaScript more and more. What's better is its many plug-ins. in the past, we had to write a special effect for the client. We had to write JavaScript for a day or two, and then debug it for another day or two before we could see the clues. Now we only need to use JQuery and its plugin to implement the special effects in our minds, thanks to their authors for their contributions to humanity ..............).

I need to select a column from the list page to export to word, and then export the content of the selected column to word. In addition, to increase universality, the number of columns is not fixed. That is to say, this table may contain four or five columns. The number of columns to be selected is not fixed. For example, there is a table below, and we want to print columns other than salary.

Name	Age	Gender	Salary
Zhang San	19	Male	10000
Zhang San	19	Male	10000
Zhang San	19	Male	10000

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

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

<

After the selection, the selected value is composed of the corresponding string, for example, Name, Age, and Sex, which is 1-Name -- 2-Age -- 3Sex, store it in another hiddenfield, read the selected string in the background code, and export the corresponding columns in the table to word.

In addition, EasyDrag jQuery Plugin is used to drag the pop-up page, which can be downloaded from http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin.

This plug-in is easy to use,

To achieve the drag effect.

The Code is as follows:

$ (Document). ready (function ()
{
$ ("# PPanel"). easydrag ();
}
);

Html code

The Code is as follows:

Title

EasyDrag can also specify the area that can be dragged. For example, you can only drag the entire p by using the title. JS can write

The Code is as follows:

$ (Document). ready (function ()
{
$ ("# PPanel"). easydrag ();
$ ("# PPanel"). setHandler ("pTitle ");
}
);

The Code is as follows:

New Web Project