<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI 可放置元素 - 基本功能</title> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "已放置！" ); } }); } ); </script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px solid #dddddd; background: #ffffff; color: #333333; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background: #fffa90; } </style> </head> <body> <div id="draggable"> <p>拖動我到目標中</p> </div> <div id="droppable"> <p>放置在此處</p> </div> </body> </html>
使用此線上 jQueryUI 編輯器（版本 jQueryUI (1.12)）從瀏覽器直接線上編輯、執行和共享您的 Jqueryui 程式碼。此線上編譯器為您提供了使用最新版本的 jQueryUI (1.12) 編輯和編譯 Jqueryui 程式碼的便利性。
如何使用線上 jQueryUI 編輯器？
編寫和執行程式碼
- 在“原始碼”標籤下直接編寫您的程式（或將其貼上）。
- 如果您想儲存您的程式，請轉到“專案”選單並儲存它。
- 您可以直接執行您的程式，無需儲存，只需點選“執行”按鈕。
如何輸入使用者輸入？
最新版本的線上 jQueryUI 編輯器允許在執行時從終端視窗提供程式輸入，其方式與您在自己的計算機上執行程式完全相同。因此，只需執行一個程式並從右側提供的終端視窗提供您的程式輸入（如果有）。
鍵盤快捷鍵
以下是我們編輯器的關鍵字快捷鍵
| 快捷鍵 | 說明 |
|---|
| ⌘ + Enter | 執行此程式 |
| ⌘ + S | 儲存專案（需要登入） |
| ⇧ + ⌘ + S | 另存為專案 |
| ⌘ + P | 新建專案 |
| ⌘ + G | 共享專案 |
| ⌘ + Z | 撤銷編輯 |
| ⌘ + Y | 恢復編輯 |
| ⌘ + A | 全選文字 |
| ⌘ + X | 剪下選中的文字 |
| ⌘ + C | 複製選定文字 |
| ⌘ + V | 貼上複製的文字 |
| ⌘ + F | 搜尋文字 |
| ⌘ + ⌥ + F | 替換文字 |
| 快捷鍵 | 說明 |
|---|
| Ctrl + Enter | 執行此程式 |
| Ctrl + S | 儲存專案 |
| Shift + Ctrl + S | 另存為專案 |
| Ctrl + G | 共享專案 |
| Ctrl + Z | 撤銷編輯 |
| Ctrl + Y | 恢復編輯 |
| Ctrl + A | 全選文字 |
| Ctrl + X | 剪下選中的文字 |
| Ctrl + C | 複製選定文字 |
| Ctrl + V | 貼上複製的文字 |
| Ctrl + F | 搜尋文字 |
| Ctrl + H | 替換文字 |
儲存並分享專案程式碼
線上儲存 Jqueryui 專案
您可以將 Jqueryui 專案儲存到我們這裡，以便以後訪問該專案。要儲存專案，您需要在我們這裡建立登入 ID。因此，在儲存專案之前，請使用本頁面右上角給出的連結建立登入 ID。
線上分享 Jqueryui 專案
您可以使用此功能與您的老師、同學和同事分享您的 Jqueryui 程式碼。只需單擊分享按鈕，它便會建立一個短連結，您可透過電子郵件、WhatsApp 甚至透過社交媒體分享該連結。如果一個共享連結在將近 3 個月內一直處於非活動狀態，它將被刪除。
編輯器的更多功能
- 主題 - 您可以在“設定”選單下的“編輯器主題”選項中更改當前編輯器的主題。
- 字型大小 - 您可以在“設定”選單下的“字型大小”選項中更改編輯器/編譯器的字型大小。
- 製表符尺寸 - 您可以在“設定”選單下的“製表符尺寸”選項中更改制表符的尺寸。
- 顯示/隱藏行號 - 您可以透過“設定”選單中的“顯示行號”或“隱藏行號”選項在程式碼中顯示/隱藏行號。
- 還有更多。
為什麼要使用線上 jQueryUI 編輯器？
使用線上 jQueryUI 編輯器來執行您的 Jqueryui 程式碼有以下幾個好處
- 平臺獨立性：您可以在任何裝置上執行程式碼，無需考慮作業系統。
- 便利性：使用它無需安裝任何內容。
- 不需要安裝：執行您的程式碼無需額外安裝。
- 更新版本：我們的線上編譯器/編輯器/終端是最新的。
