ドラッグ位置を保持しても機能しません：jQuery draggable：position（）

divを移動するたびにdivの座標位置を格納する次のコードがあります。位置はデータベースに格納され、ユーザーが戻ってもその位置にとどまります。次のコードは、それと多少似ています。しかし、ポジションは2〜3回動くと正確に維持されません。ドラッグ位置を保持しても機能しません：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は』 nullまたはオブジェクトではありませんです」 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＃コード

あります

出典

2012-02-06 Lijo

あなたのコードは、 'var absolutePositionLeft = ui.absolutePosition.left; 'という行を表示します。 –

「ui」オブジェクトには「absolutePosition」プロパティがありません。 "originalPosition"（ドラッグされる前の位置）と "position"（ドラッグ後の位置）のプロパティのみ。 –

申し訳ありません。それはここの質問ではありません。 – Lijo

私はあなたの問題は

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

は、いずれの場合においても

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

でなければならないことであると信じて、それはJavaScriptデバッガを使用するために非常に便利ですが、それは正気を維持します。 ChromeやIEを使用している場合は、F12を使用して開発者ツールにアクセスしてください。 Firefoxを使用している場合はFirebugを取得してください。

これらのツールのいずれかを使用すると、使用しているフレームワークによっては、すぐに混乱する可能性があるものを実際に確認するのに役立ちます。デバッガは、DOMとコードフローを確認するのにも役立ちます。

出典

2012-05-06 06:08:05 vpiTriumph

ドラッグ位置を保持しても機能しません：jQuery draggable：position（）

答えて

関連する問題