drag and drop using angularjs

1,676 views
Skip to first unread message

Sunitha Itham

unread,
May 2, 2013, 4:44:55 AM5/2/13
to ang...@googlegroups.com
In the document,I have two views one is with ng-include and another one from ng-view.Now i want to drag the elements from ng-include and drop them on ng-view.can i use angular-dragdrop directive for this app? In a normal document, it is working fine that means with out ng-views and ng-include. It is not working, if i have ng-view and ng-include.

Alex Spurling

unread,
May 2, 2013, 5:17:06 AM5/2/13
to ang...@googlegroups.com
Hi Sunitha.

Please provide example code for the problem you are having. I recommend you fork this example which demonstrates how to use ui-sortable to drag and drop elements in a list: http://beta.plnkr.co/Blucr4

Alex

Sunitha Itham

unread,
May 2, 2013, 5:29:20 AM5/2/13
to ang...@googlegroups.com

Thank you.
Here is the code
index.html
<html ng-app="drag-and-drop">
<head lang="en">
<meta charset="utf-8">
<title>Drag & Drop: Multiple lists</title>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="angular.js"></script>
<script src="ui-bootstrap-tpls.js"></script>
<script src="angular-dragdrop.min.js"></script> 
<script src="app.js"></script>
<script src="products.js"></script>  
<script src="cart.js"></script>
</head>
  
<body>     
  <div ng-include="'products.html'">
  </div>  
  
  <div>
    <a href="#/cart"> cart page </a>
    <ng-view> </ng-view>
  <div>
</body>
</html>

products.html

<div ng-controller="ProductsCtrl">
<ul ng-model='list1'>
  <li  ng-repeat='item in list1' data-drag="true" data-jqyoui-options="{revert: 'true', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: 'true', placeholder:'keep'}">{{item.title}}</li>
</ul>
</div>

cart.html
<div id="cart">
<tabs>
<pane heading="Shopping Cart">
<div data-drop="true" ng-model='drop' jqyoui-droppable="{multiple:true, onDrop:go()}">
<div ng-repeat="item in list4">{{item.title}}</div>    
<div> add items </div>      
<p>{{drop}}</p>
</div>
</pane>      
</tabs> 
</div>

products.js

angular.module('drag-and-drop')
.controller('ProductsCtrl', function($scope) {
  
  $scope.list1 = [
    {'title': 'Lolcat Shirt'},
    {'title': 'Cheezeburger Shirt'},
    {'title': 'Buckit Shirt'}
  ];     
});

cart.js

angular.module('drag-and-drop')
.controller('CartCtrl', function($scope) { 
  //lg_view.js add them to js
  $scope.drop = []; 
  $scope.list4 = [
    {'title': 'a'},
    {'title': 'b'},
    {'title': 'c'}
  ];  
   
  $scope.go = function(){
    console.log($scope.drop);
  };
});

app.js

angular.module('drag-and-drop', ['ngDragDrop','ui.bootstrap'])
.config(function($routeProvider) {

  $routeProvider
    .when('/cart', {
    templateUrl: 'cart.html',
    controller: 'CartCtrl'
  });  
});

So, items in products.html are not dropped into drop object of cart.html.But it is working fine with out ng-view and ng-inlude.

Alex Spurling

unread,
May 2, 2013, 6:03:27 AM5/2/13
to ang...@googlegroups.com
Sunitha, please don't paste code into your mail. Please use something like Plnkr or jsfiddle instead. It helps tremendously with understanding your problem.

Alex


--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/B4T5mCRZc0Y/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Sunitha Itham

unread,
May 2, 2013, 7:22:30 AM5/2/13
to ang...@googlegroups.com

Thank you.
I created  my app using plunker editor and this is the link http://plnkr.co/edit/FQqXLnVUgPYYLEg9JEF8?p=preview
In this app, i am trying to drag the items in products part and drop them on cart part.

Suneetha.
Reply all
Reply to author
Forward
0 new messages