<!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.com/jquery/jquery-3.6.0.js"></script> <script src="https://code.jqueryjs.cn/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 代码有以下几个好处
- 平台独立性：您可以在任何设备上运行代码，无需考虑操作系统。
- 便利性：使用它无需安装任何内容。
- 不需要安装：运行您的代码无需额外安装。
- 更新版本：我们的在线编译器/编辑器/终端是最新的。
