Перетащите и сортируйте div, используя jQuery, и выведите HTML-код - PullRequest
Новая
       18

Перетащите и сортируйте div, используя jQuery, и выведите HTML-код

0 голосов
/ 23 октября 2019

Что я делаю:

Я создаю генератор рассылок. Это просто приложение, которое генерирует рассылки (электронное письмо с некоторыми из моих продуктов в качестве рекламы) из шаблона рассылки.

Что я хочу:

Я хочу иметь возможность заказать элементы 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-код. Таким образом, я хочу создать новый файл с новым заказом.

Если есть какой-то способ сделать это, и вы знаете, как, пожалуйста, подумайте немного помочь мне. Пожалуйста, поправьте меня любым возможным способом. это помогает мне учиться!

Если я не достаточно ясно, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 28 октября 2019

Не могли бы вы быть более конкретным? Отправьте измененный HTML обратно на веб-сервер, используя ajax, как мне это сделать?

Вы можете, например, добавить кнопку. Затем, когда вы закончите сортировку статей в списке, вы нажмете эту кнопку. Затем обработчик событий, прикрепленный к этой кнопке, извлечет HTML-файл, который вы хотите сохранить в файл (htmlToSend), из элемента $('#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-запроса. Например, на php-сервере вы должны использовать file_get_contents('php://input') для получения этого. Но это зависит от используемой вами серверной технологии. Итак, дайте мне знать, если у вас есть проблемы с реализацией на стороне сервера.

...