Question

我有一份文字清单。当我将它们拖放到div框时，它应该动态创建一个min = 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>

在拖放的文本项旁边添加文本框

0 个答案: