AngularJS Tutorial For Beginners

Thursday, 16 April 2015

Sign up form using angularJS validation

Create index.html

<!DOCTYPE html>
<html>
<head>
<title>AngularJS & Bootstrap Form Validation</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div class="container">
  <div class="col-sm-8 col-sm-offset-2">
    
    <div class="page-header">
      <h1>Sign Up Form</h1>
    </div>
    
    <form name="userForm" ng-submit="submitForm()" novalidate>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && (userForm.name.$dirty || submitted)}">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
        <p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">You name is required.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && (userForm.username.$dirty || submitted)}">
        <label>Username</label>
        <input type="text" name="username" class="form-control" ng-model="user.username" placeholder="Your Username" ng-minlength="3" ng-maxlength="8" ng-required="true">
        <p ng-show="userForm.username.$error.required && (userForm.username.$dirty || submitted)" class="help-block">You username is required.</p>
        <p ng-show="userForm.username.$error.minlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too short.</p>
        <p ng-show="userForm.username.$error.maxlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too long.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && (userForm.password.$dirty || submitted)}">
        <label>Password</label>
        <input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true">
        <p ng-show="userForm.password.$error.required && (userForm.password.$dirty || submitted)" class="help-block">Your password is required.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.confirmPassword.$invalid && (userForm.confirmPassword.$dirty || submitted)}">
        <label>Confirm Password</label>
        <input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true">
        <p ng-show="userForm.confirmPassword.$error.required && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Your confirm password is required.</p>
        <p ng-show="userForm.confirmPassword.$error.compare  && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Confirm password doesnot match.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && (userForm.email.$dirty || submitted)}">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true">
        <p ng-show="userForm.email.$error.required && (userForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
        <p ng-show="userForm.email.$error.email && (userForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.contactno.$invalid  && (userForm.contactno.$dirty || submitted) }">
        <label>ContactNo</label>
        <input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">
        <p ng-show="userForm.contactno.$error.pattern  && (userForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contactno.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.country.$invalid  && (userForm.country.$dirty || submitted)}">
        <label>Country</label>
        <select name="country" class="form-control"
                            ng-model="user.country"
                            ng-options="country.CountryId as country.Name for country in countryList"
                            ng-required="true">
          <option value=''>Select</option>
        </select>
        <p ng-show="userForm.country.$error.required  && (userForm.country.$dirty || submitted)" class="help-block">Select country.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.city.$invalid  && (userForm.city.$dirty || submitted)}">
        <label>City</label>
        <select name="city" class="form-control"
                            ng-model="user.city"
                            ng-options="city.CityId as city.Name for city in cityList"
                            ng-required="true">
          <option value=''>Select</option>
        </select>
        <p ng-show="userForm.city.$error.required  && (userForm.city.$dirty || submitted)" class="help-block">Select city.</p>
      </div>
      
      <div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
        <label>Accept Terms & Conditions</label>
        <input type="checkbox" value="" name="terms" ng-model="user.terms" ng-required="true" />
        <p ng-show="userForm.terms.$error.required && (userForm.terms.$dirty || submitted)" class="help-block">Accept terms & conditions.</p>
      </div>
      
      
      <button type="submit" class="btn btn-primary">Register</button>
    </form>
  </div>
</div>
<br />

<script>   
 //defining module
var myapp = angular.module('myapp', []);

//creating custom directive
myapp.directive('ngCompare', function () {
    return {
        require: 'ngModel',
        link: function (scope, currentEl, attrs, ctrl) {
            var comparefield = document.getElementsByName(attrs.ngCompare)[0]; //getting first element
            compareEl = angular.element(comparefield);

//current field key up
            currentEl.on('keyup', function () {
                if (compareEl.val() != "") {
                    var isMatch = currentEl.val() === compareEl.val();
                    ctrl.$setValidity('compare', isMatch);
                    scope.$digest();
                }
            });

//Element to compare field key up
            compareEl.on('keyup', function () {
                if (currentEl.val() != "") {
                    var isMatch = currentEl.val() === compareEl.val();
                    ctrl.$setValidity('compare', isMatch);
                    scope.$digest();
                }
            });
        }
    }
});

// create angular controller
myapp.controller('mainController', function ($scope) {

$scope.countryList = [
    { CountryId: 1, Name: 'India' },
    { CountryId: 2, Name: 'USA' }
    ];

$scope.cityList = [];

$scope.$watch('user.country', function (newVal, oldVal) {

if (newVal == 1)
            $scope.cityList = [
                                { CountryId: 1, CityId: 1, Name: 'Noida' },
                                { CountryId: 1, CityId: 2, Name: 'Delhi' }];
        else if (newVal == 2)
            $scope.cityList = [
                               { CountryId: 2, CityId: 3, Name: 'Texas' },
                               { CountryId: 2, CityId: 4, Name: 'NewYork' }];
        else
            $scope.cityList = [];
    });

// function to submit the form after all validation has occurred   
    $scope.submitForm = function () {

// Set the 'submitted' flag to true
        $scope.submitted = true;

if ($scope.userForm.$valid) {
            alert("Form is valid!");
        }
        else {
            alert("Please correct errors!");
        }
    };
});
   
 </script>
</body>
</html>

Wednesday, 15 April 2015

ng-click event

create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ng-click event</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
 <style>
*{
 margin:0;
 padding:0;
}

body{
 font:15px/1.3 'Open Sans', sans-serif;
 color: #5e5b64;
 text-align:center;
 background:#333333;
}

a, a:visited {
 outline:none;
 color:#389dc1;
 
}

a:hover{
 text-decoration:none;
}

section, footer, header, aside, nav{
 display: block;
}

/*--------------------------------------Box-thumbal----------------------------------------*/
.mybox{
float:left;
background:#CCCCCC;
text-align:center;
margin:10px;
width: 200px;
}
.mybox img{
width:100%;
zoom:1;
}

/*-------------------------
 The menu
--------------------------*/

nav{
 display:inline-block;
 margin:60px auto 45px;
 background-color:#5597b4;
 box-shadow:0 1px 1px #ccc;
 border-radius:2px;
}

nav a{
 display:inline-block;
 padding: 18px 30px;
 color:#fff !important;
 font-weight:bold;
 font-size:16px;
 text-decoration:none !important;
 line-height:1;
 text-transform: uppercase;
 background-color:transparent;

-webkit-transition:background-color 0.25s;
 -moz-transition:background-color 0.25s;
 transition:background-color 0.25s;
}

nav a:first-child{
 border-radius:2px 0 0 2px;
}

nav a:last-child{
 border-radius:0 2px 2px 0;
}

nav.product1 .product1,
nav.product2 .product2,
nav.product3 .product3,
nav.product4 .product4{
 background-color:#e35885;
 display:block;
 height:100%;
}

p{
 font-size:22px;
 font-weight:bold;
 color:#7d9098;
}
p:before{
content:":)";
}

p b{
 color:#ffffff;
 display:inline-block;
 padding:5px 10px;
 background-color:#c4d7e0;
 border-radius:2px;
 text-transform:uppercase;
 font-size:18px;
}
 </style>

</head>

<div id="main" ng-app>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product1" ng-click="active='product1'">product1</a>
</div>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product2" ng-click="active='product2'">product2</a>
</div>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product3" ng-click="active='product3'">product3</a>
</div>

<div class="mybox">
<img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" width="100" height="100">
<a href="#" class="product4" ng-click="active='product4'">product4</a>
</div>
 </nav>

<p ng-hide="active">You have Selected</p>
 <p ng-show="active">You have Selected <b>{{active}}</b></p>
   
</div>

input url validation

Create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>input url validation</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
 <style>
 body{
 background:#333333;
 }
 .container123{
 width:50%;
 margin:10px auto;
 background:#CCCCCC;
 padding:20px;
 }
 </style>

</head>
<body ng-app="urlExample">
  <script>
  angular.module('urlExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.url = {
        text: 'http://google.com'
      };
    }]);
</script>
<div class="container123">
<form name="myForm" ng-controller="ExampleController">
  <label>URL:</label>
    <input type="url" name="input" ng-model="url.text" required>
  <label>
  <div role="alert"></label>
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.url">
      Not valid url!</span>
  </div>
  <tt>text = {{url.text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
 </form>
</div>
</body>
</html>

Tuesday, 14 April 2015

angularjs.copy function

Create index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular.copy</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
<style>
.mybox{
margin:auto;
width:50%;
padding:10px;
background:#CCCCCC;
}
</style>
</head>

<body ng-app="copyExample">
<div class="mybox">
<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name:
    <input type="text" ng-model="user.name" />
    <br />
    E-mail:
    <input type="email" ng-model="user.email" />
    <br />
    Gender:
    <input type="radio" ng-model="user.gender" value="male" />
    male
    <input type="radio" ng-model="user.gender" value="female" />
    female<br />
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>
</div>
<script>
 angular.module('copyExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.master= {};

$scope.update = function(user) {
       // Example with 1 argument
       $scope.master= angular.copy(user);
     };

$scope.reset = function() {
       // Example with 2 arguments
       angular.copy($scope.master, $scope.user);
     };

$scope.reset();
   }]);
</script>
</body>
</html>

Basic Binding App

Create index.html

<html ng-app="MyApp">
   <head>
      <title>Basic Binding App</title>
           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
           <script>
      var app = angular.module('MyApp',[]);
      
      app.controller("BookStore", function($scope)
     { 
        $scope.items = [
            {ID:"001", Name: "Web Design", Price: 100, Quantity: 10},
            {ID:"002",Name: "Web Development", Price: 200, Quantity: 80},
            {ID:"003",Name: "Wordpress", Price: 250, Quantity: 100},
   {ID:"004",Name: "Joomla", Price: 250, Quantity: 100},
   {ID:"005",Name: "Magento", Price: 250, Quantity: 100},
   {ID:"006",Name: "Prestashop", Price: 250, Quantity: 100},
   {ID:"007",Name: "Drupal", Price: 250, Quantity: 100},
   {ID:"008",Name: "JavaScript", Price: 250, Quantity: 100},
   {ID:"009",Name: "Jquery", Price: 250, Quantity: 100},
   {ID:"010",Name: "Flash", Price: 250, Quantity: 100}
        ];
});
</script>

}
.blue{
color:#0099FF;
}
.blue:after{
content:":";
margin-left:4px;
color:#CC3300;
}
</style>
   </head>
   <body>
      <div ng-controller="BookStore">
      
      <table width="100%" border="3" cellspacing="3" cellpadding="3">
  <tr>
    <th><span>Binding Products to a List through AngularJS's <strong>{{}}</strong> directive.</span></th>
    
  </tr>
  <tr ng-repeat="item in items">
    <td><p><span class="blue">ID</span> <b>{{item.ID}}</b></p></td>
    <td><p><span class="blue">Name</span> <b>{{item.Name}}</b></p></td>
    <td><p><span class="blue">Price</span> <b>{{item.Price}}</b></p></td>
    <td><p><span class="blue">Quantity</span> <b>{{item.Quantity}}</b></p></td>
    
  </tr>
  
</table>

</div>
      
      
 
   </body>
</html>

AngularJS Responsive Animate Slider

Create index.html

<!DOCTYPE html>
<html ng-app="website">
<head>
<meta charset="utf-8">
<title>AngularJS Responsive Animate Slider</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body ng-controller="MainCtrl">
<div class="container slider"> <img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage"
         ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()"
         ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}"> <a class="arrow prev" href="#" ng-click="nextSlide()"></a> <a class="arrow next" href="#" ng-click="prevSlide()"></a>
  <nav class="nav">
    <div class="wrapper">
      <ul class="dots">
        <li class="dot" ng-repeat="slide in slides"> <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}"
                       ng-click="setCurrentSlideIndex($index);">{{slide.description}}</a></li>
      </ul>
    </div>
  </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Create style.css

body {
    overflow: hidden;
    background-color: #CCCCCC;
}

.slider {
    width: 800px;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 20px solid #FFF;
    margin-top: 20px;
 margin:auto;
}
.container slider{
width:100%;
}

/*Responsive slider code here*/

@media (max-width: 320px) {
.slider {
    width: 100%;
    height: 208px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}

}
@media (max-width: 360px) {
.slider {
    width: 100%;
    height: 208px!important;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}
@media (max-width: 480px) {
.slider {
    width: 100%;
    height: 208px!important;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}
@media (max-width: 768px) {
.slider {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}
@media (max-width: 800px) {
.slider {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 2px solid #FFF;
    margin-top: 20px;
}
.slider img{
width:100%;
}
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
}

.arrow {
    position: absolute;
    z-index: 1002;
    display: block;
    top: 50%;
    margin-top: -35px;
    width: 36px;
    height: 71px;
    outline: none;
    cursor: pointer;
    background: url(../assets/img/blank.gif) no-repeat;
}

.arrow.prev {
    opacity: 0.2;
    left: 20px;
    background-image: url(../assets/img/paddle_prev_999.png);
    transition: 0.2s linear all;
}

.arrow.next {
    opacity: 0.2;
    right: 20px;
    background-image: url(../assets/img/paddle_next_999.png);
    transition: 0.2s linear all;
}

.arrow.prev:hover {
    opacity: 1;
    background-image: url(../assets/img/paddle_prev_fff.png);
}

.arrow.next:hover {
    opacity: 1;
    background-image: url(../assets/img/paddle_next_fff.png);
}

/*---------------------------------------------------------
NAV
---------------------------------------------------------*/

.nav {
    text-align: center;
    display: block;
    position: absolute;
    z-index: 1002;
    left: 0;
    bottom: -4px;
    right: 0;
    height: 48px;
}

.nonDraggableImage{
    -webkit-user-drag: none;
}

.nav .wrapper {
    margin: 0 auto;
    width: 100%;
    padding: 1em 0 .8em;
}

.nav ul {
    margin: 0;
    width: 100%;
}
@media (max-width: 320px) {
.nav ul {
    margin: auto;
    
}
}
.nav .dot, .nav .dot a {
    display: inline-block;
    zoom: 1;
}

.dots .dot {
    position: relative;
    margin: 0 8px;
    width: 12px;
    height: 12px;
}
@media (max-width: 320px) {
.dots .dot {
    position: relative;
    margin: auto;
    width: 42px;
    height: 12px;
}
}

.dots .dot a {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: #FFF;
    border: 1px solid transparent;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color 0.25s, border-color 0.25s;
    -moz-transition: background-color 0.25s, border-color 0.25s;
    transition: background-color 0.25s, border-color 0.25s;
}

.dots .dot a.active {
    border-color: #FFF;
    background-color: transparent;
}

Create app.js

angular.module('website', ['ngAnimate', 'ngTouch'])
    .controller('MainCtrl', function ($scope) {
        $scope.slides = [
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg', description: 'slider1'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg', description: 'slider2'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg', description: 'slider3'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg', description: 'slider4'},
            {image: 'http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg', description: 'slider5'}
        ];

$scope.direction = 'left';
        $scope.currentIndex = 0;

$scope.setCurrentSlideIndex = function (index) {
            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
            $scope.currentIndex = index;
        };

$scope.isCurrentSlideIndex = function (index) {
            return $scope.currentIndex === index;
        };

$scope.prevSlide = function () {
            $scope.direction = 'left';
            $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
        };

$scope.nextSlide = function () {
            $scope.direction = 'right';
            $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
        };
    })
    .animation('.slide-animation', function () {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope();

if (className == 'ng-hide') {
                    var finishPoint = element.parent().width();
                    if(scope.direction !== 'right') {
                        finishPoint = -finishPoint;
                    }
                    TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
                }
                else {
                    done();
                }
            },
            removeClass: function (element, className, done) {
                var scope = element.scope();

if (className == 'ng-hide') {
                    element.removeClass('ng-hide');

var startPoint = element.parent().width();
                    if(scope.direction === 'right') {
                        startPoint = -startPoint;
                    }

TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
                }
                else {
                    done();
                }
            }
        };
    });

Monday, 13 April 2015

Dragable class

Create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS draggable class</title>

function mousemove(event) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }

function mouseup() {
        $document.off('mousemove', mousemove);
        $document.off('mouseup', mouseup);
      }
    };
  });
})(window.angular);
</script>
 <style>
 .rock{
 background:#333333;
 margin:auto;
 padding:10px;
 overflow:auto;
 }
  </style>
  
</head>
<body ng-app="drag">
<div class="rock">
  <span draggable><p style="text-align:center;color:#003300">Drag ME 1</p></span>
  <span draggable><p style="text-align:center;color:#0000CC">Drag ME 2</p></span>
  <span draggable><p style="text-align:center;color:#993300">Drag ME 3</p></span>
  <span draggable><p style="text-align:center;color:#6633FF">Drag ME 4</p></span>
  <span draggable><p style="text-align:center;color:#FF6600">Drag ME 5</p></span>
  </div>
</body>
</html>