Business Model Canvas

Here’s a quick drag-and-drop business model canvas using JQuery. It’s intended for use on a large screen in place of a whiteboard with sticky notes. I haven’t finished the “save” functionality yet. It could also do with some optimization as I jumpstarted the code by linking to a full copy of bootstrap and jqueryui.

  
  
  jQuery UI - Business Model Canvas 2.0
  
  
  
    
  
		body {
			padding:10px;
		}
<div></div>
		.col-sm {
			border:1px solid #000;
		}
		
		h3 {
			font-size:1em;
		}
						
		.stickynote {
			width:100px;
			height:100px;
			padding:.5em;
			float:left;
			margin:1px;
			overflow:scroll;
			position: relative;
			cursor:grab;
		}
		
		.delete {
			position:absolute;
			top:0;
			left:5px;
			font-size:.7em;
			color:red;
			cursor: pointer;
			visibility:hidden;
		}
<div></div>
		.target {
			width:100%;
			height:100%;
			padding:.5em;
			background:#eee;
		}
		
		.target .stickynote:hover .delete {
			visibility:visible;
		}
		
		textarea {
			background:transparent;
			width:100%;
			resize:none;
			min-width:100%;
			min-height:100%;
			outline:0!important;
			border:0;
		}
				
		#trash {
			width:100px;
			height:100px;
			bottom:0;
			background:#ddd;
			font-size:.8em;
			float:left;
			visibility:hidden;
		}
<div></div>
  
  
  

	
	
		
			
			
				
					
						
							x
							
						
					
					Trash
				
	
			
			
			

				
					
						
							
							
								
									
										Key Partners
									
									
										
											Key Activities
										
										
											Key Resources
										
									
									
											Value Propositions
									
									
											Customer Relationships
									
									
											Value Propositions
									
								
							
							
						
					 
					
						
								
									
										Cost Structure
									
								
						
						
								
									
										Revenue Streams
									
								
						
					
				
				
			
		
	
  
  
  
	$( function() {
		$( ".stickynote" ).draggable({
			connectToSortable: ".target",
			helper: "clone",
			start: function( event, ui ) {
				$( this ).css("position", "relative");
			},
			stop: function( event, ui ) {
				$( this ).css("left", "0").css("top", "0");
			}     
		});
	
	    $( ".target" ).sortable({
		    items: "> .stickynote",
	    	placeholder: "ui-state-highlight",
			connectWith: ".target",
			start:  function( event, ui ) {
				$( "#trash" ).css("visibility", "visible");
				},
			stop: function( event, ui ) {
				$( "#trash" ).css("visibility", "hidden");
			}
	    });
	    
	    $(".target").on("dblclick", ".stickynote", noteClicked);
	    $(".target").on("mouseover", ".stickynote", makeResizable);
	    
	    $("#trash").droppable({
		    drop: function(event, ui) {
			    $( ui.draggable ).remove();
		    }
	    });
	    
	    $(".target").on("click", ".delete", deleteNote);
	    
	});
  
	function noteClicked() {
	    var divHtml = $(this).find('p').html();
	    var editableText = $("<textarea />");
	    editableText.val(divHtml);
	    $(this).find('p').replaceWith(editableText);
	    editableText.focus();
	    editableText.blur(editableTextBlurred);
	}
	  
	function editableTextBlurred() {
	    var html = $(this).val();
	    var viewableText = $("<p>");
	    viewableText.html(html);
	    $(this).replaceWith(viewableText);
	    viewableText.click(noteClicked);
	} 
	
	function makeResizable() {
		$(this).resizable({
		      containment: "parent",
		      autoHide: true
		      })
		 }
	
	function deleteNote() {
		$(this).parent().remove();
	}
<div></div>
 

Demo: Business Model Canvas 2.0