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.