Блог

Главная - Вопросы по программированию - Как получить значения встроенного стиля и отправить в Django

Как получить значения встроенного стиля и отправить в Django

#javascript #html #jquery #css #django

#javascript #HTML #jquery #css #django

Вопрос:

Я создал приложение Django, используя перетаскиваемые изображения с помощью jQuery, оно работает хорошо, однако мне нужно сохранить новые верхние и левые позиции в модели Django. Я пытался найти способ отправить информацию о встроенном стиле для некоторого типа ввода = «скрытое» значение = «??? стиль»

Смотрите, после того, как пользователь переместит изображение, Jquery перетаскивает, отправляет это :

 <div id="draggable-1" class="ui-draggable ui-draggable-handle" style="position: relative; left: 3px; top: 1453px;  "> 
    <img src="static/img/image.png" width="80" height="200">
</div>

Javascript для этого ресурса только:

 <script>
    $( "#draggable-{{forloop.counter}}" ).draggable();
</script>

Мне нужны эти цифры слева и сверху для отправки в модель базы данных представления Django и сохранения.

любое предложение, спасибо!

Ответ №1:

Перетаскиваемая библиотека позволяет передавать объект конфигурации в. Вы можете предоставить функции обратного вызова, которые будут подключаться к различным событиям. Я бы предложил использовать stop хук для отправки http-запроса с обновленной позицией следующим образом:

   <body>
    <div
      id="draggable"
      style="cursor: pointer;"
    >
      <p>Drag me</p>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $("#draggable").draggable({
        stop: function () {
            const { top, left } = this.style;
            console.log(`top ${top} | left ${left}`);
            fetch("/your-django-endpoint-here", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ top, left }),
            });
        },
      });
    </script>
  </body>

Комментарии:

1. Спасибо, вероятно, это так, я помещаю свой шаблон django и получаю сообщение о проблеме drag: 51 POST 192.168.15.101:8888 / movimenta 403 (запрещено) это может быть токен?