私はテキストのリストを持っています。それらを div ボックスにドラッグ アンド ドロップすると、最小値が 1 のテキスト ボックスが動的に作成されます。このテキストボックスは、基本的に同じテキスト要素の数です。JavaScriptを使用してこれを行いたいです。
これまでのところ、私はこれだけ持っています。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#base {width:700px; height:800px; margin: auto;}
#bill_area {width:350px; height:500px; }
#item_area {width:300px; height:500px; }
#div1 {width:250px;height:auto;padding:10px;border:1px solid #aaaaaa;min-height: 100px;}
#div2 {width:250px;height:auto;padding:10px;border:1px solid #aaaaaa;min-height: 100px;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
//ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
</script>
</head>
<body>
<div id="base" align="center">
<div id="bill_area" style="float:left">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" align="center">
-----1-----
</div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" align="center">
-----2-----
</div>
<br>
</div>
<div id="item_area" style="float:right" align="left">
<ul>
<li>Category 1</li>
<ol>
<li id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Item1</li>
<li id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Item2</li>
<li id="drag3" draggable="true" ondragstart="drag(event)" width="336" height="69">Item3</li>
<li id="drag4" draggable="true" ondragstart="drag(event)" width="336" height="69">Item4</li>
<li id="drag5" draggable="true" ondragstart="drag(event)" width="336" height="69">Item5</li>
<li id="drag6" draggable="true" ondragstart="drag(event)" width="336" height="69">Item6</li>
</ol>
<br>
<li>Category 2</li>
<ol>
<li id="drag7" draggable="true" ondragstart="drag(event)" width="336" height="69">Item7</li>
<li id="drag8" draggable="true" ondragstart="drag(event)" width="336" height="69">Item8</li>
<li id="drag9" draggable="true" ondragstart="drag(event)" width="336" height="69">Item9</li>
<li id="drag10" draggable="true" ondragstart="drag(event)" width="336" height="69">Item10</li>
<li id="drag11" draggable="true" ondragstart="drag(event)" width="336" height="69">Item11</li>
<li id="drag12" draggable="true" ondragstart="drag(event)" width="336" height="69">Item12</li>
</ol>
</ul>
</div>
</div>
</body>
</html>