How to run jquery sortable in localhost?

Question

The URL : https://johnny.github.io/jquery-sortable/

I download and run it on localhost, but it's not working

I run example.html

My URL is like this : http://localhost/ngetest/drag_drop/source/example.html

The result :

I update example.html to be like this :

<style type="text/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 **/
    }
</style>

<ol class='example'>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
<script src='js/jquery-sortable.js'></script>

<script type="text/javascript">
    $(function  () {
      $("ol.example").sortable();
    });
</script>

But just the same. It's not working

Thank you

Please check console, you have included jquery-sortable which in turn depends on jquery library. Please include that too. — Sumit Surana
– Sumit Surana, Commented Jan 12, 2016 at 10:24

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-12 10:21:44Z

1

Works perfectly fine:

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

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 **/
}

<script src="https://johnny.github.io/jquery-sortable/js/application.js"></script>

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

answered Jan 12, 2016 at 10:21

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

moses toh Over a year ago

I need you help, Look here : stackoverflow.com/questions/35640041/…

Little Phild · Accepted Answer · 2016-01-12 10:34:18Z

1

The reason when it didn't work on localhost its because maybe you didn't include jQuery

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

      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 **/
}

<!DOCTYPE html>
<html>
<head>
	<title>Sortable</title>
</head>

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

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
</body>
</html>

edited Jan 12, 2016 at 10:34

answered Jan 12, 2016 at 10:28

Little Phild

8051 gold badge7 silver badges18 bronze badges

3 Comments

Little Phild Over a year ago

Yes it does. Why ask?

Little Phild Over a year ago

Yer @PraveenKumar, I have seen the different but for the main point is to point out that he forgot to include jQuery to his project.

Praveen Kumar Purushothaman Over a year ago

Yup.. That's fine. My mistake. Sorry.

Collectives™ on Stack Overflow

How to run jquery sortable in localhost?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related