jQuery UI – Draggable Widget簡介

by vivid 1. 一月 2014 12:01

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N140114401
出刊日期:2014/1/1
開發工具:Visual Studio 2012 Ultimate
版本:.NET Framework 4.5

現今的網頁應用程式,經常使用拖曳的技巧來進行設計,讓網頁中的項目更容易和使用者透過滑鼠進行互動。jQuery UI提供拖、放功能來處理這些互動的效果,在這篇文章中,我將介紹Draggable Widget的基本功能。

我們從頭來建立一個ASP.NET網站,利用Visual Studio 2012來設計網頁。從Visual Studio 2012開發工具 -「File」-「New」-「Web Site」,在「New Web Site」對話盒中選取程式語言,例如本範例選擇「Visual C#」,選取「ASP.NET Empty Web Site」,為網站取一個名稱,然後按下「OK」鍵,請參考下圖所示:

clip_image002

圖 1:新增Web Site。

NuGet套件管理員

當你要使用jQuery UI函式庫時,就得要在網頁中引用jQuery以及jQuer UI函式庫,jQuery函式庫下載網址在:http://jquery.com/download/; jQuer UI函式庫下載網址在:http://jqueryui.com/download/

不過若使用Visual Studio 2012開發jQuery UI程式時,可以利用NuGet套件管理員來下載jQuery、jQuery UI函式庫。安裝的步驟為:在Visual Studio 2012工具-「Solution Explorer」-點選專案或網站,按滑鼠右鍵,從快捷選單選取「Manage NuGet Package」,然後從線上搜尋jQuery與jQuery UI進行下載以及安裝的動作,請參考下圖所示:

clip_image004

圖 2:使用NuGet套件管理員下載jQuery函式庫。

clip_image006

圖 3:使用NuGet套件管理員下載jQuery UI函式庫。

下載並安裝完成後,jQuery UI樣式會放在Content目錄下,而JavaScript檔案則是放在Scripts目錄。jQuey UI的主要函式庫檔案名稱為jquery-ui-1.10.3.min.js檔,請參考下圖所示:

clip_image008

圖 4:jQuey UI的主要函式庫檔案名稱為jquery-ui-1.10.3.min.js檔。

接著我們就可以在網站之中加入HTML網頁來進行設計。從「Solution Explorer」-專案或網站上方按滑鼠右鍵,從快捷選單選取「Add」-「Add New Item」,接著便會出現「Add New Item」對話盒,選取「HTML Page」為網頁取一個名稱,請參考下圖所示:

clip_image010

圖 5:加入HTML網頁。

使用Draggable Widget

Draggable Widget允許你在螢幕上拖曳HTML項目,以在HTML網頁中移動,支援水平拖曳、垂直拖曳、貼齊(Snap)、限定拖曳範圍…等功能。若除了拖曳(drag)之外,還要處理置放(drop)的動作,jQuery UI提供另一個Droppable Widget可供使用。

我們來看第一個在HTML網頁之中使用jQuery UI範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
     <style>
        #myDiv {
            width: 150px;
            height: 150px;  
            padding:15px;
            cursor:move;
          
        }
         .ui-widget-content {
             background:lightblue;
         }
    </style>   
</head>
<body>
 
    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
  
      <script>         
          (function ($) {
              $("#myDiv").draggable();
          })(jQuery);
    </script>
</body>
</html>

首先在網頁中<head >標籤之中,使用link標籤,引用內建的 jQuery UI内建的base樣式表。網頁下方使用<script>標籤引用jquery-2.0.3.min.js以及jquery-ui-1.10.3.min.js函式庫。網頁中包含一個id為「myDiv」的<div>標籤,我們只需要在JavaScript程式中叫用jQuery UI的draggable方法進行初始化動作即可。

此範例一執行,你就可以利用滑鼠拖曳div到網頁中任何位置,請參考下圖所示:

clip_image012

圖 6:利用滑鼠拖曳div到網頁中任何位置。

偵測座標

若在拖曳過程中,想要知道開始拖曳、拖曳中,以及結束拖曳時的座標位置,可以利用start、drag與stop事件,參考以下範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
     <style>
        #myDiv {
            width: 150px;
            height: 150px;  
            padding:15px;
            cursor:move;
          
        }
         .ui-widget-content {
             background:lightblue;
         }
    </style>   
</head>
<body>
    Start: (<span id="start"></span>)
    Drag: (<span id="drag"></span>)
    Stop: (<span id="stop"></span>)
    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>
  
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
  
      <script>         
          (function ($) {
              $("#myDiv").draggable({
                  start : function (event, ui)
                  {
                      $("#start").text (ui.offset.top + ", " + ui.offset.left);
                  },
                  drag : function (event, ui)
                  {
                      $("#drag").text (ui.offset.top + ", " + ui.offset.left);
                  },
                  stop: function (event, ui) {
                      $("#stop").text(ui.offset.top + ", " + ui.offset.left);
                  }
              });
          })(jQuery);
    </script>
</body>
</html>

當拖曳動作開始時,將觸發start,顯示拖曳當下div座標;拖曳過程中會不斷觸發Drag,印出目前座標;而將滑鼠放開時,才會觸發stop。此範例執行結果,請參考下圖所示:

clip_image014

圖 7:偵測座標

變更游標

在上個範例中,利用CSS設定要拖曳的<div>要顯示的游標。若要在拖曳動作發生時,才變更游標,則可以利用Draggable Widget 的選項來設定,例如以下程式範例,叫用draggable方法初始化時,設定游標為「move」:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        #myDiv {
            width: 150px;
            height: 150px;
            padding: 15px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function ($) {
            $("#myDiv").draggable({
                cursor: "move"
            });
        })(jQuery);
    </script>
</body>
</html>


 

變更游標位置

cursorAt選項可以用來變更游標出現的位置。以下範例則展示利用cursorAt選項設定游標位置為左上角:

<script>
    (function () {
        $("#myDiv").draggable({
            cursor: "move",
            cursorAt: {
                top: 0,
                left: 0
            }
        });
    })();
  </script>

此範例執行結果,請參考下圖所示:

clip_image016

圖 8:利用cursorAt選項設定游標位置為左上角。

下面這段程式碼則設定游標位置為右下角。

<script>
    (function () {
        $("#myDiv").draggable({
            cursor: "move",
            cursorAt: {
                bottom: 0,
                right: 0
            }
        });
    })();
   </script>

此範例執行結果,請參考下圖所示:

clip_image018

圖 9:利用cursorAt選項設定游標位置為右下角。

設定啟動拖曳功能的最小距離

為防止使用者可能不小心使用到滑鼠做拖曳,我們可以透過distance選項,來設定啟動拖曳功能的最小距離,拖曳超過設定的距離才啟動拖曳的行為,參考以下範例程式碼:

 

<script>
    (function () {
        $("#myDiv").draggable({
            cursor: "move",
            cursorAt: {
                bottom: 0,
                right: 0
            },
            distance: "20" //拖曳20px之後,才啟動drag
        });
    })();
</script>

 

限定拖曳範圍

axis選項可用來限定拖曳範圍,參考以下程式碼,限定拖曳的動作在x軸:

<script>
        (function () {
            $("#myDiv").draggable({
                axis: "x"
            });
        })();
    </script>

 

參考以下程式碼,限定拖曳的動作在y軸:

<script>
      (function () {
          $("#myDiv").draggable({
              axis: "y"
          });
      })();
  </script>

 

grid選項則可控制拖曳的距離,參考以下程式碼,限定每次拖曳時若水平拖曳,x軸移動100px;若垂直拖曳y軸移動100px:

<script>
          (function () {
              $("#myDiv").draggable({
                 grid:[100,100]
              });
          })();
</script>

 

還原拖曳動作

若要拖曳動作回到拖曳之前的位置,可以使用revert選項,只要將其設定為「true」,被拖曳的物件便會在使用者放開滑鼠後,移回拖曳之前的位置。revertDuration選項可以設定時間,設定的時間愈長,移動回原位的速度就愈慢;設定的時間愈短,移動回原位的速度就愈慢:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        #myDiv {
            width: 150px;
            height: 150px;
            padding: 15px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function () {
            $("#myDiv").draggable({
                revert: true,
                revertDuration: 100
            });
        })();
    </script>
</body>
</html>

 

貼齊效果

被拖曳的項目,可以像磁鐵一樣,貼齊在另一個Draggable Widget。例如以下範例程式中,包含兩個Draggable。第一個Draggable設定snap選項為「true」,然後將snapMode設定為「both」:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        #myDiv {
            width: 150px;
            height: 150px;
            padding: 15px;
            z-index: 1;
        }

        #myTarget {
            width: 400px;
            height: 400px;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>

    <div id="myTarget" class="ui-widget-content">
        <p>Draggable Target</p>
    </div>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
    <script>
        (function () {
            $("#myDiv").draggable({
                snap: true,
                snapMode: "both"
            });
            $("#myTarget").draggable();
        })();
    </script>
</body>
</html>

 

snapMode設定為「both」表示,可以停靠在目標物件的內側(inner),或外側(outer)。你也可以按需求設定為「inner」(內側)或「outer」(外側) ,此範例執行結果,請參考下圖所示:

clip_image020

圖 10:停靠在目標物件的內側。

clip_image022

圖 11:停靠在目標物件的外側。

使用stack設定ZIndex

在上個範例中,我們利用CSS設定zIndex來決定物件出現方式,因此myDiv會出現在myTarget的前方。若修改一下程式碼如下,在CSS之中不設zIndex:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        #myDiv {
            width: 150px;
            height: 150px;
            padding: 15px;
        }

        #myTarget {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>

    <div id="myTarget" class="ui-widget-content">
        <p>Draggable Target</p>
    </div>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
    <script>
        (function () {
            $("#myDiv").draggable({
                snap: true,
                snapMode: "both"
            });
            $("#myTarget").draggable();
        })();
    </script>
</body>
</html>

 

則此範例執行時,被拖曳的物件會出現在目地物件的下方,請參考下圖所示:

clip_image024

圖 12:設定zIndex。

我們可以設定stack選項來變更zIndex,修改上個範例如下,將stack選項設定為「#myDiv」,這樣被拖曳的物件就會出現在最上方:

 

<script>
          (function () {
              $("#myDiv").draggable({
                  snap: true,
                  snapMode: "both",
                  stack: "#myDiv"
              });
              $("#myTarget").draggable();
          })();
    </script>

 

此範例執行結果請參考下圖所示:

clip_image026

圖 13:使用stack設定zIndex。

拖曳控制器(Drag Handle)

你可以為被拖曳的物件設定handle選項,來指定拖曳控制器(Drag Handle),只有拖曳控制器才能夠移動物件,其它地方沒有拖曳的效果。參考以下範例,handle選項指定id為「myHandle」的<div>標籤為拖曳控制器:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        #myDiv {
            width: 150px;
            height: 150px;
            padding: 15px;
        }

        #myTarget {
            width: 400px;
            height: 400px;
        }

        #myHandle {
            text-align: center;
            line-height: 50px;
            width: 50px;
            height: 50px;
            background-color: blue;
            color: white;
            right: 0px;
            top: 0px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="ui-widget-content">
        <div id="myHandle">handle</div>
        <h1>我是DIV</h1>
    </div>

    <div id="myTarget" class="ui-widget-content">
        <p>Draggable Target</p>
    </div>

    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function () {
            $("#myDiv").draggable({
                handle: "#myHandle",
                stack: "#myTarget",
                snap: true,
                snapMode: "both",
            });
            $("#myTarget").draggable();
        })();
    </script>
</body>
</html>

 

此範例執行結果,請參考下圖所示:

clip_image028

圖 14:使用拖曳控制器。

拖曳輔助項目(Drag Helper)

拖曳輔助項目(Drag Helper)是在拖曳過程中,代替原始被拖曳物件,隨著滑鼠出現在螢幕上的項目。輔助項目可以不必像原始的物件那麼複雜,可以很簡單只有一個外框,讓使用者知道未來物件要移動的真實位置。待拖曳動作完成時,再將真正的物件搬動到新的位置。

例如以下範例設定helper為「clone」:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        .ui-widget-content {
            width: 150px;
            height: 150px;
            padding: 15px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>

    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function () {
            $("#myDiv").draggable({
                helper: "clone"
            });

        })();
    </script>
</body>
</html>

 

則範例執行時,原始被拖曳物件位置不變動,而複製一份成輔助項目移動到新位置。此範例執行結果請參考下圖所示:

clip_image030

圖 15:拖曳輔助項目(Drag Helper)。

不過這個範例並沒有處理移動到新位置的動作,因此只要將滑鼠放開,輔助項目便會消失,原始物件的位置也不會變動。

設計複製效果

若要設計拖曳複製物件的效果,我們可以在拖曳完成之後,攔截stop事件,然後撰寫複製邏輯,參考以下範例程式碼,在拖曳完成之後,複製一份輔助項目,然後叫用appendTo方法,附加到<body>標籤內:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        .ui-widget-content {
            width: 150px;
            height: 150px;
            padding: 15px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>

    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function () {
            $("#myDiv").draggable({
                helper: "clone",
                stop: function (event, ui) {
                    ui.helper.clone().appendTo($(this).parent());
                }
            });

        })();
    </script>
</body>
</html>

 

此範例執行結果,請參考下圖所示,你可以拖曳物件多次,並複製成多份:

clip_image032

圖 16:設計複製效果。

設計移動效果

若要設計移動效果,則只需要在拖曳完成之後,利用remove方法,移除原始被拖曳的物件就行了,參考以下範例程式碼:

<script>
     (function () {
         $("#myDiv").draggable({
             helper: "clone",
             stop: function (event, ui) {
                 ui.helper.clone().appendTo($(this).parent());
                  $(this).remove();
             }
         });

     })();
</script>


 

重複移動效果

在上個範例中,只可以拖曳項目移動到新位置一次,若要移動多次,可以在stop事件發生時,將拖曳輔助項目複製一份,再使其成為Draggable,參考以下範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        .ui-widget-content {
            width: 150px;
            height: 150px;
            padding: 15px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>

    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function () {
            $("#myDiv").draggable({
                helper: "clone",
                stop: f = function (event, ui) {
                    (ui.helper.clone().appendTo($(this).parent())).draggable({ helper: "clone", stop: f });
                    $(this).remove();
                }
            });

        })();
    </script>

</body>
</html>

 

自訂拖曳輔助項目(Drag Helper)

若原始被拖曳的物件很複雜,複製一份做為拖曳輔助項目可能會降低執行效能。還好拖曳輔助項目允許客製化,自行定義,例如以下範例程式碼,自定一個div做為拖曳輔助項目:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        .ui-widget-content {
            width: 150px;
            height: 150px;
            padding: 15px;
        }
    </style>
</head>
<body>

    <div id="myDiv" class="ui-widget-content">
        <h1>我是DIV</h1>
    </div>

    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>

    <script>
        (function () {
            var h = function () {
                return $("<div />", {
                    css: {
                        background: "gray",
                        opacity: 0.5,
                        height: 150,
                        width: 150
                    }
                });
            };

            $("#myDiv").draggable({
                helper: h,
                snap: "#myTarget",
                snapMode: "inner",
                stack: "#myTarget",
                stop: function (event, ui) {
                    ui.helper.clone().appendTo($(this).parent());
                }
            });

        })();
    </script>
</body>
</html>

 

此範例執行結果,請參考下圖所示,使用一個灰色的外框來替代原始被拖曳的物件:

clip_image034

圖 17:自訂拖曳輔助項目。

Tags:

.NET Magazine國際中文電子雜誌 | jQuery UI | 許薰尹Vivid Hsu

評論 (60) -

cours de theatre
cours de theatre United States
2017/9/30 上午 11:10:47 #

wow, awesome article post.Much thanks again. Really Cool.

回覆

can ho dic phoenix
can ho dic phoenix United States
2017/10/6 下午 11:04:26 #

A big thank you for your blog article.Really looking forward to read more. Great.

回覆

buy hacklinks
buy hacklinks United States
2017/10/9 下午 12:59:52 #

Enjoyed every bit of your blog.Thanks Again. Awesome.

回覆

can ho bien vung tau
can ho bien vung tau United States
2017/10/9 下午 04:54:49 #

Fantastic blog post.Thanks Again. Want more.

回覆

solarmovie
solarmovie United States
2017/10/10 下午 06:42:12 #

I loved your blog.Really looking forward to read more. Much obliged.

回覆

Sterling Businesses Ltd
Sterling Businesses Ltd United States
2017/10/10 下午 08:49:25 #

Muchos Gracias for your blog post.Really thank you! Want more.

回覆

pirater un compte facebook
pirater un compte facebook United States
2017/10/10 下午 11:08:13 #

A round of applause for your article post.Much thanks again. Want more.

回覆

Google cheat 2017
Google cheat 2017 United States
2017/10/12 下午 07:32:43 #

Im grateful for the blog article.Thanks Again. Want more.

回覆

hop over to this site
hop over to this site United States
2017/10/14 下午 02:12:41 #

I really enjoy the blog post.Much thanks again. Really Cool.

回覆

dragon city hack mod
dragon city hack mod United States
2017/10/15 下午 02:14:05 #

Thanks for sharing, this is a fantastic post.Thanks Again. Want more.

回覆

omega xl
omega xl United States
2017/10/15 下午 06:56:59 #

Wow, great article. Cool.

回覆

imp source
imp source United States
2017/10/17 下午 01:31:59 #

Thanks for the blog article.Much thanks again. Fantastic.

回覆

sletrokor
sletrokor United States
2017/10/17 下午 07:04:58 #

Thank you ever so for you blog article.Much thanks again. Great.

回覆

Osimi Tower
Osimi Tower United States
2017/10/19 上午 04:27:30 #

Awesome blog. Awesome.

回覆

VigRx Plus Review
VigRx Plus Review United States
2017/10/19 上午 06:07:29 #

Really informative article post.Much thanks again. Want more.

回覆

see here
see here United States
2017/10/19 下午 04:54:10 #

I cannot thank you enough for the blog article.Thanks Again. Really Cool.

回覆

pure slim 1000
pure slim 1000 United States
2017/10/20 上午 02:24:58 #

Major thanks for the article post.Really looking forward to read more. Really Great.

回覆

Osimi SeaView
Osimi SeaView United States
2017/10/21 上午 02:02:56 #

A round of applause for your post. Really Cool.

回覆

prix carte grise
prix carte grise United States
2017/10/21 上午 05:43:51 #

Really appreciate you sharing this blog.Really thank you! Really Cool.

回覆

elake
elake United States
2017/10/21 下午 04:08:27 #

Im grateful for the article post.Really looking forward to read more. Fantastic.

回覆

can ho vung tau
can ho vung tau United States
2017/10/28 上午 08:23:41 #

Im obliged for the blog.Really looking forward to read more. Fantastic.

回覆

EZ Battery Reconditioning
EZ Battery Reconditioning United States
2017/10/30 上午 07:17:57 #

Awesome article post.Thanks Again. Cool.

回覆

plock
plock United States
2017/10/30 下午 03:02:57 #

Thanks-a-mundo for the article.Much thanks again.

回覆

life leadership
life leadership United States
2017/11/1 上午 07:31:27 #

Awesome blog post.Really looking forward to read more. Will read on...

回覆

phenocal review
phenocal review United States
2017/11/1 下午 02:53:32 #

wow, awesome blog.Thanks Again. Really Great.

回覆

phentaslim review
phentaslim review United States
2017/11/3 下午 12:02:21 #

Thanks a lot for the blog article. Cool.

回覆

avocat quebec
avocat quebec United States
2017/11/16 下午 04:24:01 #

Very neat article post.Thanks Again. Great.

回覆

Say, you got a nice article post.Much thanks again.

回覆

java html parser library
java html parser library United States
2017/11/22 上午 12:53:15 #

Im grateful for the article post.Thanks Again. Want more.

回覆

bikinis
bikinis United States
2017/11/23 下午 07:46:34 #

Enjoyed every bit of your article.Thanks Again. Great.

回覆

Search Engine Optimisation Nz
Search Engine Optimisation Nz United States
2017/11/25 下午 04:45:49 #

I really liked your article post.Much thanks again. Really Cool.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 03:57:18 #

Thanks so much for the blog article.Really thank you!

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/26 下午 09:56:17 #

Thanks a lot for the blog article.Much thanks again. Really Great.

回覆

car wreckers
car wreckers United States
2017/11/29 下午 02:20:41 #

Great, thanks for sharing this blog post.Much thanks again. Really Cool.

回覆

Jardin Del Palacio
Jardin Del Palacio United States
2017/11/29 下午 08:51:39 #

Enjoyed every bit of your blog post.Really thank you!

回覆

primary trade lines
primary trade lines United States
2017/12/3 上午 02:44:42 #

A round of applause for your blog.Much thanks again. Want more.

回覆

mika tan
mika tan United States
2017/12/5 上午 07:33:07 #

Thank you for your article post.Much thanks again. Awesome.

回覆

Fantastic blog article.Much thanks again. Want more.

回覆

Thanks again for the article post.Really looking forward to read more. Will read on...

回覆

my blog
my blog United States
2017/12/10 下午 05:13:25 #

Thank you for your blog article. Keep writing.

回覆

Colin Ambriz
Colin Ambriz United States
2017/12/14 上午 07:20:22 #

I really liked your blog post.Really thank you! Much obliged.

回覆

Christmas Songs
Christmas Songs United States
2017/12/14 下午 08:38:54 #

wow, awesome blog article. Really Cool.

回覆

tips lose weight
tips lose weight United States
2017/12/16 下午 10:06:53 #

I value the blog post.Much thanks again. Keep writing.

回覆

Leadership
Leadership United States
2017/12/17 下午 03:36:09 #

Muchos Gracias for your blog.Really thank you! Really Cool.

回覆

like this
like this United States
2017/12/17 下午 10:36:50 #

Wow, great blog.Thanks Again. Really Cool.

回覆

extra income
extra income United States
2017/12/20 下午 04:45:30 #

Great article post.Much thanks again. Keep writing.

回覆

driver canon
driver canon United States
2017/12/23 上午 11:27:27 #

Thanks again for the blog post.Really looking forward to read more. Great.

回覆

hp driver
hp driver United States
2017/12/25 下午 11:24:19 #

Im obliged for the post.Much thanks again. Awesome.

回覆

&#216;&#162;&#219;Œ&#217;†&#217;‡
آینه United States
2017/12/26 上午 11:12:55 #

Awesome blog post.Thanks Again. Cool.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 03:19:55 #

Really appreciate you sharing this article.Really thank you! Will read on...

回覆

canon drivers
canon drivers United States
2017/12/27 下午 10:05:52 #

I am so grateful for your post. Really Great.

回覆

drivers hp
drivers hp United States
2018/1/2 下午 12:39:42 #

I really liked your blog post. Really Great.

回覆

site
site United States
2018/1/2 下午 08:47:57 #

Muchos Gracias for your post.Really thank you! Keep writing.

回覆

canon drivers
canon drivers United States
2018/1/3 下午 12:00:10 #

Major thankies for the article post.Thanks Again. Want more.

回覆

real money online casino usa
real money online casino usa United States
2018/1/4 下午 10:51:50 #

Really informative blog. Really Great.

回覆

hp printer driver
hp printer driver United States
2018/1/5 下午 04:34:29 #

Thank you ever so for you blog.Thanks Again. Cool.

回覆

web hosting
web hosting United States
2018/1/10 上午 11:01:30 #

Very neat blog post.Really thank you! Keep writing.

回覆

gejHnlZo
gejHnlZo United States
2020/9/17 上午 08:46:26 #

511928 595964never saw a site like this, relaly impressed. compared to other blogs with this write-up this was definatly the most effective web site. will save. 117649

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List