CODEWITHSUNDEEP
c#jqueryasp.net.netjquery-ui
LCJ
LCJ

Reputation: 22652

Retaining drag position does not work: jQuery draggable: position()

I have the following code which will store coordinate positions of the div whenever it is moved. The positions are stored into database so that when user returns, it remains there. The following code works somewhat similar to that. But the positions are not accurately maintained when I do two – three movements.

Note: I think the problem is following lines of code

//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;

Note: I am getting the error "Microsoft JScript runtime error: 'absolutePosition.left' is null or not an object" when I use var absolutePositionLeft = ui.absolutePosition.left;

Can you please suggest how to overcome this?

The code:

<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>



And the C# Code is 

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

}

Upvotes: 3

Views: 403

Answers (1)

vpiTriumph
vpiTriumph

Reputation: 3166

I believe your problem is that

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

should be

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

In any case, it's extremely useful to use a JavaScript debugger, it will keep you sane. If you are using Chrome or IE use F12 to get to developer tools. If you're using Firefox get Firebug.

Using one of these tools can help you quickly verify what this actually is which, depending on the frameworks your using, can quickly get confusing. A debugger can also help you verify your DOM and code flow.

Upvotes: 1

Related Questions