2

I am using jquery and jquery ui for drag and drop functionality inside angular project for which i have added,

Index.html:

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Component.ts:

declare var jquery:any;
declare var $ :any;

export class DropAreaComponent implements OnInit, OnDestroy {
      ngOnInit(): void {
        $("#people").sortable({
          update: function(e, ui) {
            $("#people .draggable").each(function(i, element) {
              $(element).attr("id", $(element).index("#people .draggable"));
              $(element).text($(element).text().split("Index")[0] + " " + "Index: " + " => " + $(element).attr("id"));
            });
          }
        });
}

Component.html:

<ul id="people">
    <li *ngFor="let person of people; let i = index">
      <div class="draggable" id={{i}}>
        <p> <b> {{ person.name }} </b> Index => {{i}}</p>
      </div>
      <br><br>
    </li>
  </ul>

But it is showing the error as,

ERROR TypeError: $(...).sortable is not a function

angular-cli.json consists of the following in scripts,

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/moment/moment.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/hammerjs/hammer.js",
    "../node_modules/materialize-css/dist/js/materialize.js",
    "../node_modules/bootstrap-material-design/dist/js/material.js",
    "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
    "../node_modules/arrive/src/arrive.js",
    "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
    "../node_modules/bootstrap-notify/bootstrap-notify.js",
    "../node_modules/chartist/dist/chartist.js",
    "../node_modules/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"
],

Is there any issues with the script in angular-cli.json when i am including in index.html? Kindly help me to solve this issue.

1 Answer 1

5

You missing : jquery-ui.min.js

  • run npm install jquery-ui-dist

  • add path in script (add after jquery include line)

    ../node_modules/jquery-ui-dist/jquery-ui.min.js

Remove following script from index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.