I am trying to use jQuery-ui's drag and drop with angular js for a list of accordions ... However my drag and drop doesn work in jsFiddle ( works in local server) as firebug states that : ReferenceError: jQuery is not defined .
Here is the jsFiddle
<!DOCTYPE html>
<html ng-app="App">
<title>Task WhiteBoard</title>
<head>
<meta charset="utf-8" />
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />
<title>Angular Drag and Drop</title>
</head>
<body ng-controller="dndCtrl" ng-cloak>
<h3>Task Whiteboard</h3>
<div class='list1' droppable value='1' >
<div class='header'>
Free Tasks
</div>
<div class="below-header">
</div>
<div ng-repeat="item in list1" data-index="{{$index}}" draggable>
<div class="zippy" zippy-title="{{item.name}}">
{{item.content.newLabel}} <br/>
{{item.content.desc}} <br/>
{{item.content.effort}} <br/>
{{item.content.owner}} <br/>
{{item.content.issues}} <br/>
{{item.content.comments}} <br/>
{{item.content.dependency}} <br/>
</div>
</div>
</div>
<div class='list2' droppable value='2'>
<div class='header'>
Claimed Tasks
</div>
<div class="below-header">
</div>
<div ng-repeat="item in list2" data-index="{{$index}}" draggable>
<div class="zippy" zippy-title="{{item.name}}">
{{item.content.newLabel}} <br/>
{{item.content.desc}} <br/>
{{item.content.effort}} <br/>
{{item.content.owner}} <br/>
{{item.content.issues}} <br/>
{{item.content.comments}} <br/>
{{item.content.dependency}} <br/>
</div>
</div>
</div>
<div class='list3' droppable value='3'>
<div class='header'>
Completed Tasks
</div>
<div class="below-header">
</div>
<div ng-repeat="item in list3" data-index="{{$index}}" draggable>
<div class="zippy" zippy-title="{{item.name}}">
{{item.content.newLabel}} <br/>
{{item.content.desc}} <br/>
{{item.content.effort}} <br/>
{{item.content.owner}} <br/>
{{item.content.issues}} <br/>
{{item.content.comments}} <br/>
{{item.content.dependency}} <br/>
</div>
</div>
</div>
<div style="clear:both;">
list 1 size : {{list1.length}} <br/>
list 2 size : {{list2.length}} <br/>
list 3 size : {{list3.length}} <br/>
</div>
</body>
</html>
Your managed resources are out of order. You need to reorder them with jquery first, then jquery ui, etc. That will solve the JS error that jQuery is undefined.
Take A look on the Left Panel of JSFiddle
, there you have selected Pure JS
, if you want to use
Jquery UI then choose jquery version 1.7.2
and check the checkBox jquery UI 1.8.18
which is below that.