我有以下代码，它会在移动时存储 div 的坐标位置。这些位置存储在数据库中，以便当用户返回时，它会保留在那里。以下代码的工作方式与此有些相似。但是当我做两到三个 Action 时，位置并没有准确保持。
注意:我认为问题出在以下代码行
//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");
}
}
}
最佳答案
我相信你的问题是
var stopPositions = $(this).position();
应该是
var stopPositions = $(event.target).position();
无论如何，使用 JavaScript 调试器都非常有用，它会让您保持清醒。如果您使用的是 Chrome 或 IE，请使用 F12 访问开发人员工具。如果您使用的是 Firefox，请获取 Firebug .
使用这些工具之一可以帮助您快速验证 this 实际上是什么，这取决于您使用的框架，很快就会让人感到困惑。调试器还可以帮助您验证 DOM 和代码流。
关于c# - 保留拖动位置不起作用 : jQuery draggable: position()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9156032/