以红色 为边框的框是我的Droppable div 区域。将图像设置为背景
以蓝色 为边框的框是我的可拖动 div 区域，其中包含指针图钉图像，可以将其放置到可放置> 地区
其中一个Dropped pointer 显示为Black Arrow
这是代码
<body>
<div id="Droppable" class="ui-ui-corner-all">
Drop Area</div>
<div id="Draggable" class="ui-ui-corner-all">
<img class="draggableItem" id="Item1" src="Images/pointer.png" alt="" />
<div class="draggableItem" id="Item2">
<img src="Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item3">
<img src="Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item4">
<img src="Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item5">
<img src="Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item6">
<img src="Images/pointer.png" alt="" />
</div>
</div>
我想实现以下功能。
1) 用户可以将 Pointer pin 放置在 Droppable 区域。
2) 一旦指针引脚被放置在可放置区域上，我将使用 jQuery 函数读取指针引脚的左上位置。位置
3) 然后通过 jQuery ajax 调用将那些Left 和Top 值存储在数据库中。
4) 然后另一个页面从数据库中获取所有指针位置，并将这些指针显示在放置指针的同一图像上。
面临的问题
当我从数据库中读取所有指针位置并将这些指针显示在图像上的相应左上位置
指针没有放在它被放下的地方
现在两个页面的代码是相同的，这意味着我在放置它的同一页面上呈现指针位置。
显示如下图
Javscript 代码
$(document).ready(function () {
$(".draggableItem").draggable();
$("#Droppable").droppable({
drop: function (event, ui) {
//my business logic
var droppablesPos = //Read dropped item postion using jQuery .position()
$.ajax({
type: "POST",
url: "/Feature/SavePointer",
datatype: "json",
traditional: true,
data: { "Left": droppablesPos.Left, "Top": droppablesPos.Top},
success: function (result) {
//return message to user
},
error: function (req, status, error) { }
}
}
});
});
代码非常复杂我正在发布示例以获取和想法
这是所有代码 javascript
<script type="text/javascript">
$(document).ready(function () {
$(".draggableItem").draggable();
var droppablesPos = $("#Droppable").position();
var dr = $("#Droppable").offset();
alert("pos Left:" + droppablesPos.left + " " + "Top:" + droppablesPos.top);
alert(" offest Left:" + dr.left + " " + "Top:" + dr.top);
$("#Droppable").droppable({
drop: function (event, ui) {
$("#" + ui.draggable.attr("id").toString() + "").addClass("droppedItemClickable");
}
});
$(".draggableItem").click(function () {
var titleName = $(this).attr("id");
var droppedItemPosition = $(this).offset();
if ($(this).is(".droppedItemClickable")) {
$("#dailog").dialog({ width: 480, height: 400, title: titleName });
$("#FeatureId").val(titleName);
$("#FeatureTopPosition").val(droppedItemPosition.top);
$("#FeatureLeftPosition").val(droppedItemPosition.left);
}
});
$("#featureSubmit").click(function () {
var FeatureId = "1";
var FeatureName = $("#featureName").val();
var FeatureDescription = $("#featureDescription").val();
$.ajax({
type: "POST",
url: "/Builder/SaveFeature",
datatype: "json",
traditional: true,
data: { "featureId": FeatureId, "featureName": FeatureName, "featureDescription": FeatureDescription },
success: function (result) {
alert(result);
$(control).val(result.toString());
},
error: function (req, status, error) { }
}
);
alert("Feature Submited Successfully...");
$("#dailog").dialog("close");
});
$("#featureCancel").click(function () {
$("#dailog").dialog("close");
});
function ret()
{ return false; }
});
和HTML
<div id="Droppable" class="ui-ui-corner-all">
Drop Area</div>
<div id="Draggable" class="ui-ui-corner-all">
<img class="draggableItem" id="Item1" src="../../Images/pointer.png" alt="" />
<div class="draggableItem" id="Item2">
<img src="../../Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item3">
<img src="../../Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item4">
<img src="../../Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item5">
<img src="../../Images/pointer.png" alt="" />
</div>
<div class="draggableItem" id="Item6">
<img src="../../Images/pointer.png" alt="" />
</div>
</div>
<br />
<div id="dailog" class="hidden">
<form method="post" action="/Builder/UploadFeature" enctype="multipart/form-data">
<div class="editor-label">
<%: Html.LabelFor(model => model.FeatureId) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.FeatureId)%>
<%: Html.ValidationMessageFor(model => model.FeatureId)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.FeatureName) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.FeatureName) %>
<%: Html.ValidationMessageFor(model => model.FeatureName) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.FeatureDesc) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.FeatureDesc) %>
<%: Html.ValidationMessageFor(model => model.FeatureDesc) %>
</div>
<input type="file" name="ImageUploaded" />
<div class="editor-label">
<%: Html.LabelFor(model => model.FeatureLeftPosition)%>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.FeatureLeftPosition)%>
<%: Html.ValidationMessageFor(model => model.FeatureLeftPosition)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.FeatureTopPosition)%>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.FeatureTopPosition)%>
<%: Html.ValidationMessageFor(model => model.FeatureTopPosition)%>
</div>
<input type="submit" onclick="ret()" />
</form>
</div>
最佳答案
你不应该从你什么都没做的代码开始获得位置。可拖动位置在放置事件的内部检索:
options.drop = function (event, ui) {
// ui here refers to the element being dropped
var leftPosition = ui.offset.left;
var topPosition = ui.offset.top;
}
希望这有帮助:)
关于jquery - 为什么 div 位置设置不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8315111/