Javascript 使用交换功能进行拖动和复制

我已经创建了一个用户界面，该界面在javascript中具有可工作的拖放和复制功能。我的问题是被复制的div有一个隐藏的div，一旦它们到达dropzone，我就需要交换它。当拖动可见div时，它会获得一个新的id，但隐藏的div不会，当我交换它们时，它会在原始位置交换到隐藏的div。以下是我的javascript代码：

这些操作用于拖动和复制功能

  function allowDrop(ev) {
      /* The default handling is to not allow dropping elements. */
      /* Here we allow it by preventing the default behaviour. */
      ev.preventDefault();
    }

    function drag(ev) {
      /* Here is specified what should be dragged. */
      /* This data will be dropped at the place where the mouse button is released */
      /* Here, we want to drag the element itself, so we set it's ID. */
      ev.dataTransfer.setData("text/html", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("text/html");
      /* If you use DOM manipulation functions, their default behaviour it not to
         copy but to alter and move elements. By appending a ".cloneNode(true)",
         you will not move the original element, but create a copy. */
      var nodeCopy = document.getElementById(data).cloneNode(true);
      nodeCopy.id = "newId"; /* We cannot use the same ID */
      ev.target.appendChild(nodeCopy);
    }
    </script>
This function works the divs swap

    <script type="text/javascript">
function SwapDivsWithClick(div1,div2)
{
 d1 = document.getElementById(div1);
 d2 = document.getElementById(div2);
 if( d2.style.display == "none" )
 {
    d1.style.display = "none";
    d2.style.display = "block";
 }
 else
 {
    d1.style.display = "block";
    d2.style.display = "none";
 }
}
</script>

功能allowDrop（ev）{
/*默认处理是不允许删除元素*/
/*在这里，我们通过防止默认行为来允许它*/
ev.preventDefault（）；
}
功能阻力（ev）{
/*此处指定了应拖动的对象*/
/*此数据将放置在释放鼠标按钮的位置*/
/*在这里，我们想拖动元素本身，所以我们设置它的ID*/
setData（“text/html”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“text/html”）；
/*如果您使用DOM操纵函数，则它们的默认行为不会影响它
复制但更改和移动元素。通过附加“.cloneNode（true）”，
您将不会移动原始图元，而是创建一个副本*/
var nodeCopy=document.getElementById（数据）.cloneNode（真）；
nodeCopy.id=“newId”/*我们不能使用相同的id*/
ev.target.appendChild（nodeCopy）；
}
此函数用于divs交换
函数SwapDivsWithClick（第1部分，第2部分）
{
d1=document.getElementById（div1）；
d2=document.getElementById（div2）；
如果（d2.style.display==“无”）
{
d1.style.display=“无”；
d2.style.display=“块”；
}
其他的
{
d1.style.display=“块”；
d2.style.display=“无”；
}
}

有没有办法将隐藏的div与可见的div一起拖动？是否可以为隐藏的div分配一个新编号，以便进行交换

---

谢谢你

我设法解开了这个小谜。当拖动到拖放区时，div将进行交换，无需鼠标单击即可进行交换。不管怎样，这里是我使用的javascript函数，我不得不修改我之前发布的一个函数的拖放和复制

<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> 
{{--Works the swap functions--}} 
<script type="text/javascript"> 
function SwapDivsWithClick(div1,div2) 
{ 
d1 = document.getElementById(div1); 
d2 = document.getElementById(div2); 
if( d2.style.display == "none" ) 
{ 
d1.style.display = "none"; 
d2.style.display = "block"; 
} 
else 
{ 
d1.style.display = "block"; 
d2.style.display = "none"; 
} 
} 
</script> 

函数allowDrop（ev）{
ev.preventDefault（）；
} 
函数拖动（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
} 
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（data.cloneNode（true））；
} 
{{--使用交换函数--}
函数SwapDivsWithClick（第1部分，第2部分）
{ 
d1=document.getElementById（div1）；
d2=document.getElementById（div2）；
如果（d2.style.display==“无”）
{ 
d1.style.display=“无”；
d2.style.display=“块”；
} 
其他的
{ 
d1.style.display=“块”；
d2.style.display=“无”；
} 
} 

以下是一组组件，以防它帮助其他人：

<div id="swapper-two" style="display:none; padding:0px;"> 
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600px" draggable="true" ondragstart="drag(event)" id="drag1"> 
<tr> 
<td align="left" bgcolor="40374B" style="padding: 0px 0px 0px 60px;"> 
<a href="" style="font-family:Helvetica Neue"><img src="" valign="top" alt="" draggable="false" color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif"</a> 
<td style="color:#ffffff; padding:0px 60px 5px 0px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px;" bgcolor="40374B" align="right" valign="bottom"> 
<p><a href="" span style="text-decoration: none; color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif" >Login&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a href="" style="text-decoration: none; color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif">My Account</a></p> 
</td> 
</tr> 
</table> 
</div> 
<div class="img" draggable="true" ondragstart="drag(event)" id="drag9"> 
<div id="swapper-one" style="display:block; padding:0px;" > 
<table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="" draggable="true" ondragstart="drag(event)" id="drag1"> 
<tr> 
<td align="center"> 
<img src="" draggable="false" alt="" width="610" height="270" id="img-one" /> 
</td> 
</tr> 
</table> 
</div> 
</div> 

请改进格式代码我希望这样更好