無法在畫布上拖放一個按鈕

我試圖製作一個工具，允許用戶創建自己的html頁面。爲此，我允許用戶點擊不同的項目，如按鈕並將其拖放到需要的位置。但由於某些原因拖放不起作用。附加的代碼僅用於按鈕（其他屬性仍需要執行）。該css文件也附加。無法在畫布上拖放一個按鈕

<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><a href=:"index.html">Home</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="create.html">Create</a></li> 
<li><a href="contact.html">Contact</a></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><a href="#">Add</a> 
<ul> 
<li><a name ="textBox" onClick="createTextBox()">Text</a></li> 
<li><a href="#">Image</a></li> 
<li><a href="#">Audio</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Shapes </a></li> 
<li><a href="#">Lines</a></li> 
<li><a name="button" onClick="createButton()">Buttons</a><li> 
<li><a href="#">Menus</a><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>`

來源

2014-01-13 Soham Dutta