Question

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

谢谢！

Answer 1

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

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

Answer 2

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

如果它是＆＃34;正常＆＃34;拖放然后你可以使用stop函数。

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

Answer 3

你想在哪里保存它们？

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

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

您可以使用偏移功能获取控件位置。

此致

Answer 4

您正在寻找ui.position属性。

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

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

More Information

Answer 5

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

这将有助于拖动控制在拖动释放时移动到其原始位置

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

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

JQuery拖放保存位置

6 个答案: