I have a single page application using angular.js and MVC.
The page calls two partial views:
Menu
Accounts
Menu loads fine and when the user clicks a menu item I call another partial view using angular ng-click and inject the partial view result in the main page.
The problem is my ng-click event on the accounts partial view will not fire no matter what i try:
1)Main SPA page:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="myApp" ng-controller="appController">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
#Html.Action("GetMenu", "Menu")
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color:#428bca;height:300px;"></div>
<div class="col-md-8" id="body">
</div>
<div class="col-md-2" style="background-color:#428bca;height:300px;"></div>
</div>
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</body>
</html>
2)_Menu partial view:
#model List<DTO.Menu.NavMenuViewModel>
<div class="container top-space scroll">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Home</a>
</div>
<div class="collapse navbar-collapse">
#{
foreach (var menuItem in Model)
{
<ul class="nav navbar-nav">
<li>
#if (menuItem.Children != null && menuItem.Children.Any())
{
#menuItem.Parent.Name<b class="caret"></b>
}
else
{
#menuItem.Parent.Name
}
#if (menuItem.Children != null && menuItem.Children.Any())
{
<ul class="dropdown-menu multi-level">
#foreach (var sub in menuItem.Children)
{
<li>
#sub.ChildMenuName
</li>
}
</ul>
}
</li>
</ul>
}
<ul class="nav navbar-nav navbar-right">
<li>{{currentModule}}</li>
</ul>
}
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('appController', function ($scope, $http, $compile) {
alert('loaded the menu controller');
$scope.Navigate = function (event) {
$("#body").empty();
$scope.currentModule = "Current module - " + event.target.innerHTML;
$http.get("/Account/GetAccounts").success(function (response) {
$("#body").append(response);
var el = angular.element('#accounts');
$compile(el)($scope);
}).error(function (data, status, headers, config) {
});
};
});
</script>
3)_Accounts partial view:
#model List<DTO.Account>
<div id="accounts">
#foreach (var account in Model)
{
<div class="row">
<div class="col-md-2">
Account number: #account.AccountNumber
</div>
<div class="col-md-2">Account holder: #account.AccountHolderName</div>
</div>
}
</div>
<script type="text/javascript">
alert('loading accounts js');
angular.module("myApp").controller("appController", function ($scope) {
alert('loaded the accounts controller');
$scope.Click = function () {
alert("click");
};
});
</script>
I don't have 50 reputation to comment your question but try first add html to dom
$("#body").append(response);
then get element by class or id and compile.
var el = angular.element('#account');
$compile(el)($scope);
if this not help try this
$("#body").append($compile(angular.html(response).contents())($scope));
This is what I've done to get it working if anyone else is having the same problem:
1)Main SPA Page:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
angular.module('myApp', []);
</script>
</head>
<body ng-app="myApp">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
#Html.Action("GetMenu", "Menu")
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="row">
<div class="col-md-12 text-center">
<h3>TREE VIEW PANEL</h3>
</div>
</div>
<div class="row">
<div class="col-md-12" id="sidePannel">
</div>
</div>
</div>
<div class="col-md-8" id="body">
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
2)_Menu partial view:
#model List<DTO.Menu.NavMenuViewModel>
<div id="mController" class="container top-space scroll" ng-controller="menuController">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">SASFIN BFS - ONLINE</a>
</div>
<div class="collapse navbar-collapse">
#{
foreach (var menuItem in Model)
{
<ul class="nav navbar-nav">
<li>
#if (menuItem.Children != null && menuItem.Children.Any())
{
#menuItem.Parent.Name<b class="caret"></b>
}
else
{
#menuItem.Parent.Name
}
#if (menuItem.Children != null && menuItem.Children.Any())
{
<ul class="dropdown-menu multi-level">
#foreach (var sub in menuItem.Children)
{
<li>
#sub.ChildMenuName
</li>
}
</ul>
}
</li>
</ul>
}
<ul class="nav navbar-nav navbar-right">
<li>{{currentModule}}</li>
</ul>
}
</div>
</div>
</div>
</div>
<script src="~/Scripts/Custom/menu.js"></script>
<script src="~/Scripts/Custom/accounts.js"></script>
3)_Account partial view:
#model List<DTO.Account>
<div id="accounts" ng-controller="accountsController">
#foreach (var account in Model)
{
<div class="row">
<div class="col-md-2">
Account number: #account.AccountNumber
</div>
<div class="col-md-2">Account holder: #account.AccountHolderName</div>
</div>
<hr />
<br />
}
</div>
4)menu.js:
angular.module("myApp").controller('menuController', function ($scope, $http, $compile) {
$scope.activateView = function (html) {
$compile(html.contents())($scope);
if (!$scope.$$phase)
$scope.$apply();
};
$scope.Navigate = function (event) {
$("#body").empty();
$("#body").html("<img src='/Images/loading.gif' id='loader' />")
$("#sidePannel").empty();
$scope.currentModule = "Current module - " + event.target.innerHTML;
$http.get("/Account/GetAccounts").success(function (response) {
var body = angular.element(document.getElementById("body"));
$("#body").empty();
body.html(response);
var mController = angular.element(document.getElementById("mController"));
mController.scope().activateView(body);
$("#loader").hide();
}).error(function (data, status, headers, config) {
$("#body").empty();
});
};
});
5)account.js:
angular.module("myApp").controller("accountsController", function ($scope) {
$scope.Click = function (event) {
var accNumber = event.target.innerHTML;
$("#sidePannel").empty();
$("#sidePannel").append("<b>" + accNumber + "</b>");
};
});
Related
How add following code as li element when user is log in? I try add li befor a element but it doesn't work.
Logout
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Project valuation", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Logout", "User", FormMethod.Post, new { id = "logoutForm" }))
{
#*Logout
<li onclick="location.href='javascript:document.getElementById('logoutForm').submit()';"> Logout </li>*#
<li>Logout</li>
}
}
#*<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>*#
</ul>
</div>
</div>
</div>
At the end of your file, try to implement a script section as the following :
#section Scripts {
<script type="text/javascript">
// Script goes here
</script>
}
and in the a tag you can do something like this :
<a href="#" onclick="yourFunction()" >Logout</a>
I have been working on a permissions system for my NodeJS (Using the SailsJS MVC) and have ran into a problem. After solving my first error which is outlined here I am now running into an issue where the form does nothing. It does not send an error to console and it does not log an error in the SailsJS console itself. Below is my code.
/**
* GroupsController (API)
*
* #description :: Server-side logic for managing Permissions
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
module.exports = {
update: function(req, res, next) {
var groupObj = {
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
};
Groups.update(req.param('id'), groupObj, function groupUpdated(err) {
if (err) {
return res.redirect('/group/edit/' + req.param('id'));
}
res.redirect('/');
});
},
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
}).exec({
error: function (err) {
return res.negotiate(err);
}
});
}
};
GroupsController (Form)
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.groupCreateForm = function(){
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroup.groupName,
canViewUsers: $scope.createGroup.canViewUsers,
canEditUsers: $scope.createGroup.canEditUsers,
canPromoteToStaff: $scope.createGroup.canPromoteToStaff,
canViewNotes: $scope.createGroup.canViewNotes,
canEditPermissions: $scope.createGroup.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
}}]);
HTML Form
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
<h2 class="form-signin-heading">Create A Group</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroup.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<div class="row">
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="createGroup.canViewUsers">
</div>
<!-- Can View Users -->
<div class="row">
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="createGroup.canEditUsers">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="createGroup.canPromoteToStaff">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="createGroup.canViewNotes">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="createGroup.canEditPermissions">
</div>
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroup.$invalid">
<span>Create Group</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
You don't have the right ng-controller attached to your form, so the $scope.groupCreateForm shouldn't even be getting called. Try adding ng-controller="GroupsController" to your form and try again.
<form ng-controller="GroupsController" ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
I fixed the issue with the following code
<body ng-app="GroupsModule" ng-controller="GroupsController" ng-cloak>
I had the wrong app and controller defined. Thank you to Fissio for sparking the idea that this was the problem.
I am trying to use ajax so the page does not automatically refresh, however for some reason i cant seem to get it to work. I was going for this effect, using this Link
You can see how it slides in etc, without reloading, however i cant seem to get the site to work at all to even reload. When i click the link , nothing comes up.
I am trying to get it to work with login and register page. When i click on the links , nothing happens.
Thanks again for the help.
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="Mainbody">
<div class="linetop">
<div class="linebottom">
<h3>JULY 19th, 2016</h3>
<!-- <h1><span>J</span>UST <span>J</span>UICE</h1> -->
<h1>INTO THE NEW YOU</h1>
<h2>THE APPLICATION TO A HEALTHIER LIFESTYLE</h2>
<div class="bottop">
<div class="botbottom"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="navbar-text pull-left">
<div class="logo1">
<img src="Image/Logo.png" class="img-responsive"/>
<p>© 2016 by JJ. CopyRight Ali Issa</p>
</div>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-instagram fa-2x"></i>
</div>
</div>
</div>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href='"+newHash+"']").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Edit:
With new code added , now all it does is refresh like normal and not fade in , fade out
I am new to AngularJS and trying to make an application which loads data by calling APIs. It is like I am fetching the list of boxes of type A (Resource Groups) and then each Box of type A has multiple boxes of type B (Virtual Machines). So I have been able to fetch all type A boxes and by using each value of type A box, I have been able to fetch all type B boxes(VMs). But now how shall I put the VM's in respective resource group's panel-body.
(function() {
var app = angular.module('AzureManager', []);
app.controller('resourceGroupsController', function($scope, $http) {
$scope.getRGList = function() {
$http.get('/resource-group/all').then(function(response) {
$scope.resourceGroups = response.data.value;
});
};
$scope.getRGList();
});
})();
<!DOCTYPE HTML>
<HTML ng-app="AzureManager">
<head>
<title>Azure Manager</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="public/app.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Azure Manager</a>
</div>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Anant
</li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" ng-controller="resourceGroupsController">
<div class="panel panel-default" ng-repeat="RG in resourceGroups" id="{{RG.name}}-resources-container">
<div class="panel-heading">
<div class="panel-title">{{RG.name}}</div>
</div>
<div class="panel-body"></div>
</div>
</section>
</body>
</HTML>
Either call a vms/all endpoint by chaining the calls to resource groups and virtual machines and link the virtual machines to their resource groups after both promises have returned.
Or call a endpoint for each resource group:
$scope.getRGList = function() {
$http.get('/resource-group/all').then(function(response) {
$scope.resourceGroups = response.data.value;
$scope.resourceGroups.forEach(function (rg) {
$http.get('/virtual-machine/'+rg.id).then(function(response) {
rg.vms = response;
}
}
});
};
<section class="container-fluid" ng-controller="resourceGroupsController">
<div class="panel panel-default" ng-repeat="RG in resourceGroups track by RG.id" id="{{RG.name}}-resources-container">
<div class="panel-heading">
<div class="panel-title">{{RG.name}}</div>
</div>
<div class="panel-body">
<div class="vm" ng-repeat="vm in RG.vms track by $index">
{{vm.name}}
</div>
</div>
</div>
</section>
I am trying to make a tool that will allow users to create their own html pages. For this i am allowing users to click on different items like button and drag and drop them on required locations. But for some reason the drag and drop is not working. The code attached is only for the button(the other attributes are still to be implemented). The css files are also attached.
`
<title>HTML5 Editor</title>
<link href="html editor/business-casual/css/bootstrap.css" rel="stylesheet">
<link href="html editor/business-casual/css/business-casual.css" rel="stylesheet">
<script type='text/javascript'>
var i = 1;
var bufferCanvas = new Array();
var ButtonArray = [];
ButtonArray.push({
type : "submit",
name: [],
value:[]
});
console.log(ButtonArray);
<!-- Create Button when user clicks on button-->
function createButton(ev)
{
var canvas=document.getElementById("myCanvas")
var button = document.createElement("input");
div=document.createElement('div');
button.type="submit";
button.style.position='absolute';
button.name="Button"+i;
button.value = "Button"+i;
div.appendChild(button);
div.draggable=true;
div.ondragstart="drag(event)";
div.id="draggable";
div.class="draggable ui-widget-content";
var l=i-1;
ButtonArray[l].name.push(div.id);
ButtonArray[l].value.push(button.value);
canvas.appendChild(div);
i++;
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function allowDrop(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drag(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drop(ev)
{
ev.stopPropagation();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();}
</script>
<style type="text/css">
<!--
.style1 {font-size: 18px}
-->
</style>
</head>
<body>
<div class="brand">HTML5 EDITOR</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../business-casual/index.html">Business Casual</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Create</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12" id="menu">
<ul>
<li>Add
<ul>
<li><a name ="textBox" onClick="createTextBox()">Text</a></li>
<li>Image</li>
<li>Audio</li>
<li>Video</li>
<li>Shapes </li>
<li>Lines</li>
<li><a name="button" onClick="createButton()">Buttons</a><li>
<li>Menus<li>
</li>
</ul>
</li>
</ul>
<ul><li><a name="SaveButton" onClick="saveTextAsFile()">Save</a></li></ul>
</div>
</div>
</div>
</div>
<div class="ui-widget-header" id ="myCanvas" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div><!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>`
you can use this greate example http://www.w3schools.com/html/html5_draganddrop.asp