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, Jan 12 '16 at 10:24

score 1 · Accepted Answer · answered Jan 12 '16 at 10:21

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>

I need you help, Look here : http://stackoverflow.com/questions/35640041/how-to-validation-of-input-text-field-in-ajax?noredirect=1#comment58961736_35640041 — moses toh, Feb 25 '16 at 23:59

Little Phild · Answer 2 · 2016-01-12T10:34:18.143

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 '16 at 10:34

answered Jan 12 '16 at 10:28

Little Phild

775
1
5
17

Yes it does. Why ask? – Little Phild Jan 12 '16 at 10:30
1

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. – Little Phild Jan 12 '16 at 10:31
Yup.. That's fine. My mistake. Sorry. – Praveen Kumar Purushothaman Jan 12 '16 at 10:32

How to run jquery sortable in localhost?

2 Answers2