时间戳

首页 > 解决方案 > 使用 jQuery 拖动和排序 div 并输出 html 代码

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

问题描述

我在做什么：

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

我想要的是：

我希望能够订购在我的邮件生成器中生成的 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代码。这样我想用新订单创建一个新文件。

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

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

标签： javascriptjqueryhtmlcode-snippets

解决方案

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

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

推荐阅读