爲什麼DIV位置不正確設置

This is my HTML output look like 爲什麼DIV位置不正確設置

Box在紅鑲上是我可投放 DIV區域。這是圖像設置爲背景

Box在藍鑲上有我可拖動格區包含指針圖釘圖像可降至可放開區域

的一個人掉隊指針顯示爲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）一旦指針引腳落在Droppable區域，我將使用jQuery函數讀取指針引腳的左上方位置。位置

3）然後那些左和頂部價值我在數據庫通過使jQuery的AJAX調用存儲。

4）然後，另一個頁面從數據庫中獲取所有指針位置，並在放置指針的同一圖像上顯示這些指針。

問題面對

當我從數據庫中讀取所有指針位置，並顯示這些指針與各自的左上位置的圖像

指針沒有得到安置，其中被摔壞

現在這兩個頁面的代碼都是相同的意思，我把它放在同一頁面上的指針位置。

其表現爲以下圖片

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>

來源

2011-11-29 pramod choudhari

......從外觀上來看，我會說你是混合的x/y座標。 – Yoshi

是的，我會同意@Yoshi。如果這不是問題，那麼我們需要看你的代碼。 –

@Yoshi你應該讓這個答案，因爲它看起來像這確實是問題 –

你不應該從你什麼都不做的代碼開始。可拖動位置被檢索內 drop事件：

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

希望這有助於:)

來源

2011-12-01 23:04:43 shennyL

這是非常「不尋常」的代碼。但從第一個（和第二個）外觀來看，我覺得你並沒有真正將可拖動的物體移動到可拖放的位置。所以它的DOM上下文仍然是它的舊容器，只是x/y座標改變了。

因此，當您提取這些座標時，它們將相對於其原始容器的位置，而不是相對於可放置容器的位置。所以如果你用這些位置座標將指針加載到droppable中，它們將會關閉。

來源

2011-12-01 18:02:46 devnull69

爲什麼DIV位置不正確設置

回答

相關問題