JQuery 拖放保存位置

Question

我使用 JQuery 拖放来创建在 www.bbc.com 等网站上使用的仪表板。拖拽控件后是否可以保存控件的坐标？如果是这样，有人有可以推荐的网站或文章吗？

谢谢！

Answer 1

如果您只想要控件的坐标，则可以使用
http://api.jquery.com/offset/ 拖动停止后然后保存这些坐标到数据库。

但是，如果您的元素捕捉到网格，您可能需要计算该元素位于哪个网格列以及该列中的哪个位置。

Answer 2

你想把他们救到哪里？

您可以编写一个函数来保存容器内的位置，当用户完成移动控件时，会触发一个事件：

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

您可以在其中使用 offset 函数获取控件位置。

问候

Answer 3

您正在寻找 ui.position 属性。

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

该事件可以绑定在可拖动方法中，但为了清楚起见，我将其保留为这样。

更多信息

Answer 4

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

这将帮助您的拖动控件在释放拖动时移动到其原始位置

Answer 5

您不能在 drop 上运行一个函数，使用 ajax 将相关控件的坐标和大小发送到服务器并保存吗？

如果是“正常”拖放，那么您就有一个可以使用的stop功能。

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

Answer 6

拖放

$('#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(); 
                          }
                        });

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