0

嗨，我目前正在使用以下方法保存 div

Javascript

$(document).ready(function(){


   $( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6,



     stop : function () {
            var id = $(this).attr("id");
               var x = $(this).position().left;
               var y = $(this).position().top;

                 $.ajax({
        url: "changeContact.php", /* You need to enter the URL of your server side script*/
        type: "POST",
          /* add the other variables here or serialize the entire form. 
          Image data must be URI encoded */
        data:{
                cid:id,
                x: x,
                y: y
                },  
        success: function(msg)
        {

        }

            })
           } 
});

});

PHP

$qry = "SELECT * from contact Where CustomerID='$pid'";
$result = mysql_query($qry);

while ($row = mysql_fetch_array($result)) 
{
echo '<div class="ex" id="'.$row["ContactID"].'">';
echo '</div>';

}

页面onload时如何分别保存每条数据的位置？有没有什么方法可以自己调用Ajax方法而不拖拽？

4

2 回答 2

1

我建议将执行 AJAX 调用的代码放入它自己的函数中。这样，您可以在页面加载时调用它一次，也可以从可拖动代码内部调用它：

$(function ($) { // $(function () ... is the same as $(document).ready(function () ... - just quicker

    function doAjax (data) {
        $.ajax({
            url: 'changeContact.php',
            type: 'POST',
            data: data,
            success: function () {
                // ...
            }
        });
    }

    function onDraggableStop (event, ui) {
        doAjax({
            cid: this.id,
            x: ui.offset.left,
            y: ui.offset.top
        });
    }

    function onPageLoad () {
        var position = $(this).position();

        doAjax({
            cid: this.id,
            x: position.left,
            y: position.top
        });
    }

    $( ".ex" )
        .each(onPageLoad) // for all found elements: fire the ajax call immediately

        // set up dragging support
        .draggable({
            containment: 'parent',
            cursor: 'pointer',
            opacity: 0.6,
            stop : onDraggableStop // fire the ajax call for the element that just stopped dragging
        }
    );

});
于 2013-06-27T09:23:12.510 回答
0

[更新]在以下之后提出 附加$.ajax()请求$(document).ready(function() {：

$(document).ready(function(){

   // additional ajaxrequest after pageload:

var obj = {windows:{}};

$(".ex").each(function() {

    obj.windows[$(this).attr('id') + 'posLeft'] = $(this).position().left;
    obj.windows[$(this).attr('id') + 'posTop'] = $(this).position().top;

})

$.ajax({
        url : 'server.php',
        type : 'post',
        data : obj,
        dataType : 'json',
        success : function(data)
        {

        },
        error : function()
        {

        }
    });

   $( ".ex" ).draggable({
   //[...]

额外的 $.ajax() 将在页面加载后执行。

例如，您的 php 脚本能够获取数据$_POST['windows']。您可以在其上使用 foreach 循环。

这是小提琴：http: //jsfiddle.net/VQa3S/

这是数据，将在我的小提琴中发送到服务器：

发布数据

此外，请注意您的 sql 查询。它可能容易受到 sql-injections 的攻击。使用 PDO 和绑定参数。

于 2013-06-27T08:37:55.083 回答