AngularJS + jQueryUI Demo 1

Drag and Drop Frameworks

by codef0rmer

HTML

<!DOCTYPE html>
<html ng-app="drag-and-drop">  
  <head lang="en">
    <meta charset="utf-8">
    <title>Drag & Drop: MVC Frameworks</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://raw.github.com/codef0rmer/angular-dragdrop/master/src/angular-dragdrop.min.js"></script>

    <script type="text/javascript">
      var App = angular.module('drag-and-drop', ['jqyoui']);

      App.controller('oneCtrl', function($scope, $timeout) {
        $scope.images = [{'thumb': '1.png'},{'thumb': '2.png'},{'thumb': '3.png'},{'thumb': '4.png'}]
        $scope.list1 = [];
        angular.forEach($scope.images, function(val, key) {
          $scope.list1.push({});
        });
        $scope.list2 = [
          { 'title': 'Item 1', 'drag': true },
          { 'title': 'Item 2', 'drag': true },
          { 'title': 'Item 3', 'drag': true },
          { 'title': 'Item 4', 'drag': true }
        ];

        $scope.startCallback = function(event, ui) {
          console.log('You started draggin');
        };

        $scope.stopCallback = function(event, ui) {
          console.log('Why did you stop draggin me?');
        };

        $scope.dragCallback = function(event, ui) {
          console.log('hey, look I`m flying');
        };

        $scope.dropCallback = function(event, ui) {
          console.log('hey, you dumped me :-(');
        };

        $scope.overCallback = function(event, ui) {
          console.log('Look, I`m over you');
        };

        $scope.outCallback =...

CSS

.thumbnail { height: 280px !important; }
.btn-droppable { width: 180px; height: 30px; padding-left: 4px !important; }
.btn-draggable { width: 160px; }
.emage { height: 215px; }