Question

我有以下代码，它会在移动时存储div的坐标位置。这些职位存储在数据库中，以便当用户返回时，它仍然存在。以下代码与此类似。但是当我做两到三次动作时，这些位置并没有得到准确的保持。

注意：我认为问题出在以下代码行

//var absolutePositionLeft = (ui.originalPosition.left) + (ui.offset.left);
//var absolutePositionTop = (ui.originalPosition.top) + (ui.offset.top);

var stopPositions = $(this).position();
var absolutePositionLeft = stopPositions.left;
var absolutePositionTop = stopPositions.top;

注意：当我使用var absolutePositionLeft = ui.absolutePosition.left;

时，我收到错误“Microsoft JScript运行时错误：'absolutePosition.left'为空或不是对象”

你能否建议如何克服这个问题？

代码：

<head runat="server">

<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript">

    $(function () {

        $("#<%=dImage.ClientID%>").draggable(
        {

            drag: function (event, ui) {
                //when dragging
                $("#<%=dImage.ClientID%>").css("opacity", "0.3");
            },

            stop: function (event, ui) {
                //when stopped

                //showAlert();

                debugger;

                //var absolutePositionLeft = (ui.originalPosition.left) + (ui.offset.left);
                //var absolutePositionTop = (ui.originalPosition.top) + (ui.offset.top);

                var stopPositions = $(this).position();

                var absolutePositionLeft = stopPositions.left;
                var absolutePositionTop = stopPositions.top;

                var elementName = ui.helper.attr('id');
                saveCoords(absolutePositionLeft, absolutePositionTop, elementName);

                $("#<%=dImage.ClientID%>").css("opacity", "1.0");
            },

            cursor: "move"

        });

    });

    function showAlert() 
    {
        alert("hai"); 
    }  

    function saveCoords(x, y, el, id) 
    {

        $.ajax({

            type: "POST",
            url: "GridViewHighlightTEST.aspx/SaveCoords",
            data: "{x: '" + x + "', y: '" + y + "', element: '" + el + "', userid: '1'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) 
                     {
                       if (response.d != '1') 
                        {
                            alert('Not Saved!');
                        }

                    },
            error: function (response) 
                   {
                    alert(response.responseText);
                   }
        });

    }


</script>

C＃代码是

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = GetSavedCoords(1);
    foreach (DataRow row in dt.Rows)
    {
        string elementName = row["element"].ToString();
        System.Web.UI.HtmlControls.HtmlControl theControlElement = (HtmlControl)this.FindControl(elementName);

        if (theControlElement != null)
        {
            theControlElement.Style.Add("left", row["xPos"].ToString() + "px");
            theControlElement.Style.Add("top", row["yPos"].ToString() + "px");
        }
    }

}

Answer 1

我相信你的问题是那个

var stopPositions = $(this).position();

应该是

var stopPositions = $(event.target).position();

在任何情况下，使用JavaScript调试器都非常有用，它会让你保持理智。如果您使用的是Chrome或IE，请使用F12访问开发人员工具。如果您正在使用Firefox，请获取Firebug。

使用这些工具之一可以帮助您快速验证this实际上是哪个，取决于您使用的框架，可能会很快混淆。调试器还可以帮助您验证DOM和代码流。

保留拖动位置不起作用：jQuery draggable：position（）

1 个答案: