为什么 div 位置设置不正确答案

【问题标题】：why div position does not set properly为什么 div 位置设置不正确
【发布时间】：2011-12-02 07:04:43
【问题描述】：

Red 边框是我的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) 用户可以在 Droppable 区域放置指针引脚。

2) 一旦指针引脚被放置在可放置区域上，我将使用 jQuery 函数读取指针引脚的左上位置。位置

3) 然后通过 jQuery ajax 调用将那些 Left 和 Top 值 我存储在数据库中。

4) 然后另一个页面从数据库中获取所有指针位置，并将这些指针显示在放置指针的同一图像上。

面临的问题

当我从数据库中读取所有指针位置并在图像上显示这些指针时，分别对应的左上位置

指针没有放在它被丢弃的地方

现在两个页面的代码是相同的，这意味着我将指针位置呈现在放置它的同一页面上。

如下图所示

JavaScript 代码

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

【问题讨论】：

...从外观上看，我会说您正在混合 x/y 坐标。
是的，我同意@Yoshi 的观点。如果这不是问题，那么我们需要查看您的代码。
@Yoshi 你应该回答这个问题，因为看起来这确实是问题
@Keith.Abramo 我不确定，没有看到他的任何代码，我觉得我的假设作为答案太模糊了。
@Sparky672 我认为 javascript 不需要在这里添加，因为它可以正常工作，给出指针左和上位置。和相同的值，当我设置为位置指针它显示另一个位置

标签： jquery html jquery-ui css

【解决方案1】：

你不应该从你什么都没做的代码开始。可拖动位置在 inside 放置事件中检索：

 options.drop = function (event, ui) {
      // ui here refers to the element being dropped
      var leftPosition = ui.offset.left;
      var topPosition = ui.offset.top;
 }

希望有帮助:)

【讨论】：

【解决方案2】：

这是非常“不寻常”的代码。但是从第一个（和第二个）外观我得到的印象是您实际上并没有将可拖动的物理移动到可放置的位置。所以它的 DOM 上下文仍然是它的旧容器，只是 x/y 坐标发生了变化。

因此，当您提取这些坐标时，它们将相对于其原始容器的位置，而不是相对于可放置容器的位置。因此，如果您使用这些位置坐标将指针加载到 droppable 中，它们将关闭。

【讨论】：