JQuery拖放保存位置

本文关键字：位置 保存 拖放 JQuery | 更新日期: 2023-09-27 17:57:32

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

谢谢！

JQuery拖放保存位置

如果你只想要控件的坐标，你可以使用http://api.jquery.com/offset/然后将这些坐标保存到数据库中。

但是，如果您的元素捕捉到一个网格，您可能需要计算元素所在的网格列和该列中的位置。

您想将它们保存在哪里？

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

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

在那里，您可以使用偏移函数获得控件的位置。

问候

您正在查找ui.position属性。

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

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

更多信息

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

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

您是否可以在drop上运行一个函数，使用ajax将有问题的控件的坐标和大小发送到服务器并保存它？

如果是"正常"拖放，那么您就可以使用stop函数。

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

拖放

$('#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(); 
                          }
                        });
                    },
                  });
             });
          }
      });
相关文章：