使用 jQuery 拖动和排序 div 并输出 html 代码

Question

我在做什么：

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

我想要的：

我希望能够订购在我的邮件生成器中生成的 divs 并使用新订单创建一个新文件。让我告诉你这个概念：

 $( "#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>

下面是一个简单示例，说明邮件生成时的外观。 (请运行代码段)

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

问题：

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

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

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

Answer 1

Could you be a little more specific? Send the modified HTML back to the webserver using ajax, how would i do that?

例如，您可以添加一个按钮。然后，当您完成对列表中文章的排序后，您将单击该按钮。然后，附加到该按钮的事件处理程序将从 $('#sortable') 元素中提取要保存到文件 (htmlToSend) 的 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 请求的 post-body 接收该数据。例如，在 php-server 上，您将使用 file_get_contents('php://input') 来接收它。但这取决于您使用的服务器端技术。如果您在服务器端实施方面遇到问题，请告诉我。

使用 jQuery 拖动和排序 div 并输出 html 代码

Drag and sort divs using jQuery and output html code

html

javascript

jquery

code-snippets