Drag and sort divs using jQuery and output html code

Question

What i'm doing:

I'm creating a Mailings Generator. This simply is an application, that generates Mailings (An E-mail with some of my products as advertisement) from a Mailing Template.

What i want:

I want to be able to order the divs generated in my Mailing Generator and create a new file with the new order. Let me show you the concept:

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

So here's a quick example of how the mailing could look when generated. (Please run the code snippet)

I want to drag the divs and sort them the way i'd like. After i sorted them i want to create a NEW file but this time display the divs in the order i sorted the last one.

Question:

When i move the div's, i get the new order as output. What i want is it to output all the html code. This way i want to create a new file with the new order.

If there is any way to do this and you know how, please consider helping me a little. Please correct me in any way possible. it helps me learn!

If i wasn't clear enough, please let me know.

Answer 1

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

You could for example add a Button. Then when u are done sorting your articles in the list you will click that button. The eventhandler attached to that button will then extract the html that you want to save to a file (htmlToSend) from the $('#sortable') element and send it to a certain 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">

On the serverside you will need to receive that data from the post-body of the http-request. For example on a php-server u would use file_get_contents('php://input') to receive that. But that is dependant on your serverside technology that you use. So let me know if u have problems with the serverside implementation.