sevein/index.html

## index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Exercice 2</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

      h1{
          font-family: Tahoma;
          font-size: 2em;
          color: #555555;
      }

      #content{
          margin: auto;
          width: 80%;
      }

      #input_container{
          width: 100%;
          text-align: center;
          margin-bottom:10px;
      }

      .container{
          float:left;
          width: 33%;
          height: 20%;
          text-align: center;
      }

      input#button_move{
          margin-top:50%;
          width:80px;
          height: 120px;
      }

      .container ul{

          height: 300px;
          background-color: #CCCCCC;
          border: 1px #333333 double;
          text-align: left;
          padding: 0;
      }

      .container li{
          list-style: none;
          font-family: "Monotype Corsiva";
          color: #444444;
          margin: 5px;
          padding: 5px;
          border: 1px solid #999;
          cursor: move;
      }

      .container li:hover {
        background-color: #fff;
      }

      .container li > a {
        float: right;
      }

      .clear{
          clear: both;
      }

    </style>

    <script type="text/javascript">

      var ElementModel = Backbone.Model.extend(
        {

        });

      var ElementCollection = Backbone.Collection.extend(
        {
          model: ElementModel
        });

      var ElementView = Backbone.View.extend(
        {
          tagName: 'li',

          template: _.template('<span><%= text %></span><a href="#">X</a>'),

          events:
            {
              'click a': 'clear',
            },

          initialize: function()
            {
              this.model.bind('destroy', this.remove, this);
            },

          render: function()
            {
              $(this.el)
                .html(this.template(this.model.toJSON()))
                .draggable(
                  {
                    revert: 'invalid'
                  });

              return this;
            },

          remove: function()
            {
              $(this.el).hide('fast', function()
                {
                  $(this).remove();
                });
            },

          clear: function()
            {
              this.model.destroy();
            },
        });

      var AppView = Backbone.View.extend(
        {
          el: 'body',

          events:
            {
              'click #button_insert': 'insertElement',
              'click #button_move': 'moveElement',
              'click #button_move_all': 'moveAllElement',
            },

          initialize: function()
            {
              this.input = this.$('#input');
              this.container1 = this.$('#container1').append('<ul />').children('ul');
              this.container2 = this.$('#container2').append('<ul />').children('ul');

              collection1.bind('add', this.addOne, this);
              collection2.bind('add', this.addOne, this);

              // Assign containers to collections
              collection1.container = this.container1;
              collection2.container = this.container2;

              this.render();
            },

          render: function()
            {
              this.container2.droppable(
                {
                  drop: function(event, ui)
                    {
                      var text = ui.draggable.find('span').text();

                      collection2.add([{text: text}]);

                      var item = collection1.find(function(value)
                        {
                          return value.get('text') == text;
                        });

                      if (item)
                      {
                        item.destroy();
                      }
                    }
                });
            },

          insertElement: function(item)
            {
              // Get new item name
              var text = this.input.val();

              // Stop execution if empty
              if (!text)
              {
                this.input.focus();

                return false;
              }

              if (collection1.detect(function(value)
                {
                  return value.get('text') == text;
                }))
              {
                alert('It already exists, try a different name.');

                return false;
              }

              // Create model and add it to colleciton 1
              collection1.add([{text: text}]);

              // Empty input
              this.input.val('');
            },

          moveElement: function(item)
            {
              // Take first element
              var item = collection1.first();

              if (!item)
              {
                return false;
              }

              // Add it to collection2
              collection2.add([{text: item.get('text')}]);

              // Remove it
              item.destroy();
            },

          moveAllElement: function(item)
            {
              collection1.each(function(item)
                {
                  collection2.add([{text: item.get('text')}]);
                  item.destroy();
                });
            },

          addOne: function(model)
            {
              // Create view from model
              var view = new ElementView({ model: model });

              // Append to container1 list
              model.collection.container.append(view.render().el);
            }

          }

        );

      $(document).ready(function()
        {
          window.collection1 = new ElementCollection;
          window.collection2 = new ElementCollection;
          window.app = new AppView;
        });

    </script>

  </head>
  <body>

    <div id='content'>

      <!-- Input container-->
      <div id='input_container'>

        <!-- Text input box -->
        <input id="input" type="text" name="text_input" />

        <!-- Button added the text input in the input box -->
        <input id="button_insert" type="button" value="Insert"/>

      </div>

      <!-- First container -->
      <div id="container1" class="container">
        <h1>Elements draggable</h1>
      </div>

      <div class="container">
        <input id='button_move' type="button" value="Move" /><br />
        <input id='button_move_all' type="button" value="Move all" />
      </div>

      <!-- Second container -->
      <div id="container2" class="container">
        <h1>Elements dropped</h1>
      </div>

      <!-- Clearfix -->
      <div class="clear"></div>

    </div>

  </body>
</html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Exercice 2</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />

	<style type="text/css">

	h1{
	font-family: Tahoma;
	font-size: 2em;
	color: #555555;
	}

	#content{
	margin: auto;
	width: 80%;
	}

	#input_container{
	width: 100%;
	text-align: center;
	margin-bottom:10px;
	}

	.container{
	float:left;
	width: 33%;
	height: 20%;
	text-align: center;
	}

	input#button_move{
	margin-top:50%;
	width:80px;
	height: 120px;
	}

	.container ul{

	height: 300px;
	background-color: #CCCCCC;
	border: 1px #333333 double;
	text-align: left;
	padding: 0;
	}

	.container li{
	list-style: none;
	font-family: "Monotype Corsiva";
	color: #444444;
	margin: 5px;
	padding: 5px;
	border: 1px solid #999;
	cursor: move;
	}

	.container li:hover {
	background-color: #fff;
	}

	.container li > a {
	float: right;
	}

	.clear{
	clear: both;
	}

	</style>

	<script type="text/javascript">

	var ElementModel = Backbone.Model.extend(
	{

	});

	var ElementCollection = Backbone.Collection.extend(
	{
	model: ElementModel
	});

	var ElementView = Backbone.View.extend(
	{
	tagName: 'li',

	template: _.template('<span><%= text %></span><a href="#">X</a>'),

	events:
	{
	'click a': 'clear',
	},

	initialize: function()
	{
	this.model.bind('destroy', this.remove, this);
	},

	render: function()
	{
	$(this.el)
	.html(this.template(this.model.toJSON()))
	.draggable(
	{
	revert: 'invalid'
	});

	return this;
	},

	remove: function()
	{
	$(this.el).hide('fast', function()
	{
	$(this).remove();
	});
	},

	clear: function()
	{
	this.model.destroy();
	},
	});

	var AppView = Backbone.View.extend(
	{
	el: 'body',

	events:
	{
	'click #button_insert': 'insertElement',
	'click #button_move': 'moveElement',
	'click #button_move_all': 'moveAllElement',
	},

	initialize: function()
	{
	this.input = this.$('#input');
	this.container1 = this.$('#container1').append('<ul />').children('ul');
	this.container2 = this.$('#container2').append('<ul />').children('ul');

	collection1.bind('add', this.addOne, this);
	collection2.bind('add', this.addOne, this);

	// Assign containers to collections
	collection1.container = this.container1;
	collection2.container = this.container2;

	this.render();
	},

	render: function()
	{
	this.container2.droppable(
	{
	drop: function(event, ui)
	{
	var text = ui.draggable.find('span').text();

	collection2.add([{text: text}]);

	var item = collection1.find(function(value)
	{
	return value.get('text') == text;
	});

	if (item)
	{
	item.destroy();
	}
	}
	});
	},

	insertElement: function(item)
	{
	// Get new item name
	var text = this.input.val();

	// Stop execution if empty
	if (!text)
	{
	this.input.focus();

	return false;
	}

	if (collection1.detect(function(value)
	{
	return value.get('text') == text;
	}))
	{
	alert('It already exists, try a different name.');

	return false;
	}

	// Create model and add it to colleciton 1
	collection1.add([{text: text}]);

	// Empty input
	this.input.val('');
	},

	moveElement: function(item)
	{
	// Take first element
	var item = collection1.first();

	if (!item)
	{
	return false;
	}

	// Add it to collection2
	collection2.add([{text: item.get('text')}]);

	// Remove it
	item.destroy();
	},

	moveAllElement: function(item)
	{
	collection1.each(function(item)
	{
	collection2.add([{text: item.get('text')}]);
	item.destroy();
	});
	},

	addOne: function(model)
	{
	// Create view from model
	var view = new ElementView({ model: model });

	// Append to container1 list
	model.collection.container.append(view.render().el);
	}

	}

	);

	$(document).ready(function()
	{
	window.collection1 = new ElementCollection;
	window.collection2 = new ElementCollection;
	window.app = new AppView;
	});

	</script>

	</head>
	<body>

	<div id='content'>

	<!-- Input container-->
	<div id='input_container'>

	<!-- Text input box -->
	<input id="input" type="text" name="text_input" />

	<!-- Button added the text input in the input box -->
	<input id="button_insert" type="button" value="Insert"/>

	</div>

	<!-- First container -->
	<div id="container1" class="container">
	<h1>Elements draggable</h1>
	</div>

	<div class="container">
	<input id='button_move' type="button" value="Move" /><br />
	<input id='button_move_all' type="button" value="Move all" />
	</div>

	<!-- Second container -->
	<div id="container2" class="container">
	<h1>Elements dropped</h1>
	</div>

	<!-- Clearfix -->
	<div class="clear"></div>

	</div>

	</body>
	</html>