Question

我创建了一个用户界面，在javascript中有一个工作拖动和复制。我的问题是被复制的div有一个隐藏的div，我需要在它们到达dropzone时进行交换。在拖动时，可见的div获得一个新的id，但隐藏的id不会，当我交换它时，它会交换到它原始位置中的隐藏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>

有没有办法将隐藏的div与可见的div一起拖动？隐藏的div也可以分配一个新号码，以便可以交换吗？

谢谢

Answer 1

我设法解决了这个小谜语。当拖动到放置区域时，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>

这是一组组件，可以帮助其他人：

<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>

使用交换函数拖动和复制

1 个答案: