JqueryUI online editor

Code

Result

JqueryUI CDN website

You can use the following JqueryUI cdn to replace the JqueryUI version in the code:

https://releases.JqueryUI.com/
https://cdnjs.com/libraries/JqueryUI

How to use JqueryUI Online Editor?

Three easy steps

In the left code editor, write or paste your JqueryUI code.
Click the "Run" button to run your JqueryUI code.
The output will be displayed in the right result area.

What is JqueryUI Online Editor

JqueryUI Online Editor that allows your JqueryUI code online without the need of a web server, You don't need to use a text editor to edit JqueryUI files on your computer.

This way you can quickly and easily see the JqueryUI running results, With ace editor, any errors or warnings are identified and clear and actionable feedback is provided to help you improve the performance of your code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI online editor</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 type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jqueryui/1.10.0/jquery-ui.min.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dragged in!" );
      }
    });
  } );
  </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>Click me and hold the mouse to drag me</p>
</div>

<div id="droppable">
  <p>Drag it to me</p>
</div>

</body>
</html>

Features of JqueryUI Online Editor

Simple and convenient JqueryUI online editor or tester
Keyword suggestion autocomplete.
Provides a variety of design themes.