将 div 从一个拖放到另一个答案

【问题标题】：Drag and drop a div easly from one to another将 div 从一个拖放到另一个
【发布时间】：2016-04-12 09:49:48
【问题描述】：

我正在尝试轻松地将 div 从 div 移动到另一个 div。

我这里有样式和html，所以你可以帮助我，这里是代码

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #myDIV {
        border: 1px solid black;
        margin-bottom: 10px;
        width: 500px;
        height: 300px;
        box-sizing: border-box;
        border: solid #000 2px;
        background-color: #d12;
      }

      .ZE {
        position: fixed;
        width: 400px;
        height: 100px;
        background-color:  #73AD81;
        overflow: hidden;
        border-radius: 20px 60px;
        border: 2px solid #965D31;
      }

      .ZE.left {
        top: 50%;
        transform: translateY(-50%);
      }

      .ZE.right  {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .ZE.up {
        left: 50%;
        transform: translateX(-50%);
      }

      .ZE.down {
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="parent-div">
      <div class="myDIV" id="myDIV"></div>
    </div>
    <script type="text/javascript">
      var parent = document.getElementById("parent-div");

      // for demo purposes
      var data = {
        isConnected: true
      },
          classes = ['left', 'right', 'up', 'down'];

      //socket.on("isConnected", function(data) {
      // Receive the 'data' and check if 'isConnected' is true

      // loop for demo purposes
      for (var i = 0; i < 4; i++) {

        if (data.isConnected === true) {
          parent.innerHTML += "<div class='ZE " + classes[i] + "'></div>"
        }

      }
      //});
    </script>
  </body>
</html>

我想将 #myDIVdiv 移动到我创建的其他 div 中。 ZE left ZE right ... 等等。我认为这很容易，但我对这些东西很陌生，所以我需要一点帮助。

【问题讨论】：

您的意思是将您的#myDIV 克隆到其他新创建的 div 中吗？
只需将其拖放到那里
使用jquery-ui droppable之类的插件怎么样？
我该怎么做？
阅读文档，那里有示例。如果您有具体问题，我很乐意提供帮助。不要忘记通过将我的用户名添加到您的评论中来让我感到兴奋，例如 @MoshFeu，

标签： javascript jquery html css drag-and-drop

【解决方案1】：

这篇文章问的是类似的问题。（我问了这个问题）。如果您查看 cmets 部分中的 JSFiddle 代码和答案，您应该能够了解如何执行此操作。我花了几个小时来定制它以满足我的需求，但我去了那里。所以请耐心等待并继续尝试使用该代码。您需要在您的部分中包含 JQuery 库参考，如下所示

<head>
   <!--JQuery Lirary for adding answer steps-->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

希望能帮助你走上正轨

【讨论】：