How to add custom js to a site (jquery sortable)

[Georgich]

Hi there. I want to add SORTABLE jquery to a site. Can you help me, i’m doing something wrong…

What i’m trying to emplement:
https://johnny.github.io/jquery-sortable/

Here is my code:

child theme functions.php:

wp_register_script( 'jquery-sortable', 'https://my-site/wp-content/themes/pro-child/js/jquery-sortable-min.js', null, null, true );
wp_enqueue_script('jquery-sortable');

Global Theme Options JS:

jQuery(document).ready(function($) {
  $("ol.example").sortable();
}

Global Theme Options CSS:

body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}

HTML (in text element):

<ol class='example'>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Something is not working…

[rad]

Hi Philipp,

Thanks for reaching out.

We don’t provide customization here in the forum but I like to do a quick peek of what’s happening. Please provide the site’s URL that has this for checking. Again. I can’t promise any solution.

Thanks!

[Georgich]

https://petrov.top/test/

Child Theme functions.php:

wp_register_script( 'jquery-sortable', 'https://petrov.top/wp-content/themes/pro-child/js/jquery-sortable-min.js', null, null, true );
wp_enqueue_script( 'jquery-sortable' );

CSS

body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}

JS

jQuery(document).ready(function($) {
  $("ol.example").sortable();
}

HTML (Text Element)

<ol class="example">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Thanks anyway. Probably there is an error in functions.php. Or i need to use jquery-ui instead of jquery-sortable…

[nabeel]

Hey Philipp,

Thank you for the credentials. I checked your setup and you’ve a syntax error in your Golbal JS, please replace your code with this:

jQuery(document).ready(function($){
	$("ol.example").sortable();
});

This should make your script work as expected. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Georgich]

OMG! Thanks! DAT WORKS!

Well done!

[paul.r]

You’re welcome!