markhillard/Editor

Doesn't work with jQuery codes.

Closed this issue · 2 comments

ozbillwang commented

Describe the bug
Copy and paste the jQuery codes (https://jqueryui.com/draggable/) for a show case about draggable.

I can see the image, but can't drag it.

To Reproduce

code for test:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

Expected behavior
Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Screenshots

image

Desktop (please complete the following information):

  • OS: macbook
  • Browser: Google chrome
  • Version [e.g. 22]

updates

Test with other jQuery sample codes, no one works
https://jqueryui.com/

image

markhillard commented

@ozbillwang, The issue here is that you're including the doctype, all the head tags, and the rest of the code all inside the "HTML" window. If you separate each chunk of code out in each window, then it should work. Also don't forget to click the "run" button at the top when you're done pasting in the following code:

HTML

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

CSS

body { background-color: #000; }
#draggable { background-color: #fff; width: 150px; height: 150px; padding: 0.5em; }

JS

$(function () {
    $('#draggable').draggable();
});

The preview window on the right already has the doctype, head, and body tags, so you don't need to add that in your HTML.

markhillard commented

@ozbillwang, actually I just tested it with your original code (like how you tried it), and it actually did work. Looks like you just need to press the "run" button.

Side note: The reason I don't auto-run JS code in the preview window is because it will try to run constantly while you're typing in JS code, which can be annoying... and it produces a ton of errors and unexpected behavior because of incomplete code.

  • 👍1