使用jQuery拖放div并输出html代码

Question

我在做什么：

我正在创建邮件生成器。这只是一个应用程序，它从邮件模板生成邮件（带有我的一些产品作为广告的电子邮件）。

我想要什么：

我希望能够订购在我的邮件生成器中生成的div，并使用新的订单创建一个新文件。让我向您展示这个概念：

 $( "#sortable" ).sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) {
        $('.connectedSortable').each(function() {
            result = "";
            ($(this).sortable("toArray"));
            $(this).find("div").each(function(){
            result += $(this).text() + "<br />";
            });
            $("."+$(this).attr("id")+".list").html(result);
        });
    }
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    
<div id="sortable" class="connectedSortable">
    
<div class="companyLogo">
<!--    logo here...-->
</div>

<div class="productBox1">
    Product Name: 1
    Price: 10,00
    <!--    etc...-->
</div>
<div class="productBox2">
    Product Name: 2
    Price: 20,00
    <!--    etc...-->
</div>
<div class="productBox3">
    Product Name: 3
    Price: 30,00
    <!--    etc...-->
</div>
<div class="productBox4">
    Product Name: 4
    Price: 40,00
    <!--    etc...-->
</div>

<div class="footerInformation">
<!--    Footer Info Here...-->
</div>
    
</div>

<div class="sortable list"></div>

因此，这是一个简单的示例，说明生成邮件时的外观。 （请运行代码段）

我想拖动div并按照我想要的方式对它们进行排序。对它们进行排序后，我想创建一个新文件，但是这次按我对最后一个文件进行排序的顺序显示div。

问题：

当我移动div时，我得到新订单作为输出。我想要的是输出所有html代码。这样，我想用新订单创建一个新文件。

[如果有任何方法可以做到，而您知道怎么做，请考虑给我一点帮助。请以任何可能的方式纠正我。它可以帮助我学习！

如果我不够清楚，请告诉我。

Answer 1

您能具体一点吗？使用ajax将修改后的HTML发送回Web服务器，我该怎么做？

例如，您可以添加一个按钮。然后，当您完成对列表中的文章进行排序时，您将单击该按钮。然后，附加到该按钮的事件处理程序将从htmlToSend元素中提取要保存到文件（$('#sortable')）的html，并将其发送到特定的server_address。

$( "#sortable" ).sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) {
        $('.connectedSortable').each(function() {
            result = "";
            $(this).sortable("toArray");
            $(this).find("div").each(function(){
              result += $(this).text() + "<br />";
            });
            $("."+$(this).attr("id")+".list").html(result);
        });
    }
});

$('#send').on('click', function() {
  const htmlToSend = $('#sortable').html();
  alert('SENDING HTML: ' + htmlToSend);
  $.ajax({
    method: 'POST',
    url: '<SERVER_ADDRESS>', //CHANGE SERVER_ADDRESS to the address of the script that will handle the html (save it to file or send it via email)
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({ html: htmlToSend }),
    success: function(response) {
      //code to execute if saving on server was successful
    },
    error: function(err){
      //code to execute if saving on server failed
    }
  });
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<div id="sortable" class="connectedSortable">
  <div class="companyLogo">
  <!--    logo here...-->
  </div>

  <div class="productBox1">
      Product Name: 1
      Price: 10,00
      <!--    etc...-->
  </div>
  <div class="productBox2">
      Product Name: 2
      Price: 20,00
      <!--    etc...-->
  </div>
  <div class="productBox3">
      Product Name: 3
      Price: 30,00
      <!--    etc...-->
  </div>
  <div class="productBox4">
      Product Name: 4
      Price: 40,00
      <!--    etc...-->
  </div>

  <div class="footerInformation">
  <!--    Footer Info Here...-->
  </div>
    
</div>

<input type="button" value="Send to Server" id="send">

在服务器端，您将需要从http请求的后主体接收该数据。例如，在php服务器上，您将使用file_get_contents('php://input')接收该信息。但这取决于您使用的服务器端技术。因此，请让我知道您是否在服务器端实现方面遇到问题。