Question

This is my HTML output look like

以红色为界的框是我的 Droppable div区域。将图像设置为背景

以 Blue 为界的框是我的可拖动 div区域，其中包含指针图像，可以将其删除为可投放地区

掉落指针中的一个显示为黑箭

这是代码

<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）一旦Pointer引脚掉落在Droppable区域，我将使用 jQuery 功能读取Pointer引脚的Left Top位置。位置

3）然后通过 jQuery ajax 调用那些左和顶部值我存储在数据库中。

4）然后另一个页面从DB获取所有指针位置，并将这些指针显示在指针被丢弃的同一图像上。

问题面对

当我从数据库中读取所有指针位置并在图像上显示那些指针时，各自的左上方位置

指针不会被放置在被丢弃的地方

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

显示如下图像

enter image description here

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>

Answer 1

你不应该从你什么也没做的代码开始。可拖动的位置在内部下拉事件中检索：

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

希望这有帮助：）

Answer 2

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

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

为什么div位置设置不正确

2 个答案: