gpt4 book ai didi

javascript - 无法在 Canvas 上拖放按钮

转载 作者:行者123 更新时间:2023-11-28 11:32:26 25 4
gpt4 key购买 nike

我正在尝试制作一个允许用户创建自己的 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>`

最佳答案

你可以使用这个伟大的例子http://www.w3schools.com/html/html5_draganddrop.asp

关于javascript - 无法在 Canvas 上拖放按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21090739/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com