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

我有下面的代碼，它將存儲每當它被移動div的座標位置。職位存儲在數據庫中，以便用戶返回時保留在那裏。以下代碼與此有點類似。但是當我做了兩三個動作時，這些職位並沒有得到準確的維護。保留拖動位置不起作用：jQuery draggable：position（）

注：我認爲這個問題是下面的代碼行

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

注：我收到錯誤「Microsoft JScript運行錯誤：‘absolutePosition.left’爲空或不是對象」當我使用var absolutePositionLeft = ui.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"); 
     } 
    } 

}

來源

2012-02-06 Lijo

你的代碼確實顯示了任何一行'var absolutePositionLeft = ui.absolutePosition.left;' – 2012-02-06 11:09:01

那麼'ui'對象沒有「absolutePosition」屬性。只有「originalPosition」（拖動之前的位置）和「位置」（拖動之後的位置）屬性。 – 2012-02-06 11:44:07

對不起。這不是問題。 – Lijo 2012-02-06 14:20:11

我相信你的問題是，

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

應該

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

在任何情況下，這是非常有用的使用JavaScript調試器，它會你保持理智。如果您使用的是Chrome或IE，請使用F12開發工具。如果您使用Firefox，請獲取Firebug。

使用其中的一種工具可以幫助您快速驗證this究竟是哪一種，取決於您使用的框架，可能會很快導致混淆。調試器還可以幫助您驗證您的DOM和代碼流。

來源

2012-05-06 06:08:05 vpiTriumph

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

回答

相關問題