JQuery EasyDrag を使用してドラッグ可能な Div をポップアップし、同時に値を Div に渡し、Div_jquery の選択された値を返します。

WBOY

リリース： 2016-05-16 18:43:49

オリジナル

1361 人が閲覧しました

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

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

私の設計では、最初にバックグラウンドコードを使用してこのテーブルのヘッダーをループし、次の文字列

を形成します。

1-名前--2-年齢--3-性別--4-給与、この文字列をhiddenfieldに保存し、JavaScriptで読み取り、ポップアップDivのチェックボックスに対応するhtmlを動的に追加します。

選択後、選択した値が対応する文字列に形成されます。例: 名前、年齢、性別を選択して、1-名前--2-年齢--3 性別を形成します。それを別の非表示フィールドに保存し、バックグラウンドコードで選択した文字列を読み取り、テーブル内の対応する列を Word にエクスポートします。

同時に、このポップアップページをドラッグ可能にするために、EasyDrag jQuery プラグインが使用されます。このプラグインは http からダウンロードできます。 ://fromvega.com/wordpress/2007 /07/14/easydrag-jquery-plugin/ダウンロード。

このプラグインは非常に便利でシンプルです。

.easydrag();
}

コードをコピー

コードは次のとおりです:

タイトル

EasyDrag は、たとえば、div 全体をタイトル内でのみドラッグすることもできます。

コードをコピー

 コードは次のとおりです。

$(document).ready ( function()

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

コードをコピー

コードは次のとおりです:

New Web Project

新しい Web プロジェクトページ

;タイトル

="butonPanel" style="text-align:right;">

<フィールドセット>

凡例>

源代网下ダウンロード

JQuery EasyDrag を使用してドラッグ可能な Div をポップアップし、同時に値を Div に渡し、Div_jquery の選択された値を返します。