JQuery Перетащите Сохранить позиции

Question

Я использую перетаскивание JQuery для создания панели инструментов, используемой на сайтах, таких как www.bbc.com.Можно ли сохранить координаты элемента управления после перетаскивания элементов управления?если так, у кого-нибудь есть веб-сайт или статья, которую они рекомендовали бы?

Спасибо!

Answer 1

перетаскивание

$('#page_list').sortable({

            update  : function(event, ui)
          {
              $("#save_arrangement").show();
              var id_array = new Array();
                 $('#page_list tr').each(function(){
                    id_array.push($(this).attr("id"));
                 });
             console.log(id_array);
             $("#save_arrangement").on("click", function () {
                  $.ajax({
                    url:"/quotations/save_arrangement",
                    method:"POST",
                    data:{'id_array':id_array},
                    success:function(success)
                    {
                     swal({
                        title:"Arrangement has been saved",
                        type:"success"
                     },
                     function(isConfirm) {
                          if (isConfirm) {
                                  location.reload(); 
                          }
                        });

                    },
                  });
             });
          }
      });

Answer 2

$(this).draggable({revert:true});

это поможет вашему элементу управления перетаскиванием переместиться в исходное положение при отпускании

Answer 3

Вы ищете атрибут ui.position.

$("#foo").draggable();
$("#foo").bind("dragstop", function (e, ui)
{
    console.log(ui.position.top);
    console.log(ui.position.left);
});

Событие может быть связано внутри перетаскиваемого метода, но я оставил его для ясности.

Дополнительная информация

Answer 4

Где вы хотите сохранить их?

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

 stop: function(event, ui) { ... }

Там вы можете получить позицию управления, используя функцию смещения.

С уважением

Answer 5

Не могли бы вы запустить функцию перетаскивания, которая отправляет координаты и размер соответствующего элемента управления с помощью ajax на сервер и сохраняет его?

Если это "обычное" перетаскивание, то у вас естьstop функция, которую вы можете использовать.

$( ".selector" ).draggable({    stop:
function(event, ui) { $.ajax(...) }
});

Answer 6

Если вы просто хотите координаты элементов управления, вы можете просто использовать http://api.jquery.com/offset/ после того, как перетаскивание остановлено и затем сохраняет эти координаты в базе данных.

Но если ваши элементы привязываются к сетке, вы можете рассчитать, какой столбец сетки и какую позицию в этом столбце занимает элемент.