拖放和放置座標下的位置

我需要將產品列表中的項目拖放到空白容器中。當用戶完成拖動&下降，我必須將位置和使用的項目存儲到分貝，以便我可以再次顯示此配置。拖放和放置座標下的位置

不幸的是我的問題始於早期階段。我成功地拖動，並從列表中拋棄物品的容器，但不幸的是他們顯示在表格的形式，而不是在座標我分配給他們

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShoppingCart.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
    <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     var srcElement; 

     $(document).ready(function() { 

      $("div .product").each(function() { 
       this.addEventListener('dragstart', OnDragStart, false); 
      }); 

      $("div .bag").each(function() { 
       this.addEventListener('dragenter', OnDragEnter, false); 
       this.addEventListener('dragleave', OnDragLeave, false); 
       this.addEventListener('dragover', OnDragOver, false); 
       this.addEventListener('drop', OnDrop, false); 
       this.addEventListener('dragend', OnDragEnd, false); 
      }); 

     }) 

     function OnDragStart(event) { 
      srcElement = this; 

     } 

     function OnDragOver(e) { 
      e.preventDefault(); 


      return false; 
     } 

     function OnDragEnter(e) { 
      e.preventDefault(); 
     } 

     function OnDragLeave(e) { 
      e.preventDefault(); 
     } 

     function OnDrop(e) { 
      e.preventDefault(); 

      var dm = srcElement.cloneNode(true); 

      dm.style.Left = e.offsetX; 
      dm.style.Top = e.offsetY; 
      dm.style.position = "absolute"; 

      //$(this).append(srcElement); 
      e.target.appendChild(dm); 

      e.stopPropagation(); 
      return false; 
     } 

     function OnDragEnd(e) { 
      e.preventDefault(); 
     } 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <table > 
       <tr> 
        <td> 
         <div draggable="true" id="div1" class="product"> 
          <header>Rieker Trekkingsandalen braun</header> 
          <img src="images/monitor.jpg" style="height: 150px; width: 150px;" /> 
         </div> 
        </td> 
        <td> 
         <div id="div2" class="product" draggable="true"> 
          <header>Rieker Trekkingsandalen braun</header> 
          <img src="images/Cart.jpg" style="height: 150px; width: 150px;" /> 
         </div> 
        </td> 
        <td> 
         <div id="div3" class="product" draggable="true"> 
          <header>Rieker Trekkingsandalen braun</header> 
          <img src="images/mouse.jpg" style="height: 150px; width: 150px;" /> 
         </div> 
        </td> 
        <td> 
         <div id="div4" class="product" draggable="true"> 
          <header>Rieker Trekkingsandalen braun</header> 
          <img src="images/speaker.jpg" style="height: 150px; width: 150px;" /> 
         </div> 
        </td> 
       </tr> 
      </table> 

      <div class="bag"> 
      </div> 
     </div> 
    </form> 
</body> 
</html> 

.product { 
    height: 300px; 
    width: 150px; 
    border: 2px solid #666666; 
    background-color: white; 
    text-align: center; 
    cursor: move; 
} 
.bag { 
    background-color: green; 
    height: 500px; 
    width: 500px; 
    position: absolute; 
}

任何人都可以點我到這裏的問題？

乾杯，斯蒂芬

來源

2013-02-28 stefan

dm.style.position = 「絕對」; 用絕對改變它。 – 2013-02-28 12:58:26

Thx for verry quick response !!好吧，這是顯而易見的^^但是，我修正了 – stefan 2013-02-28 13:07:01

後，你的行爲不會改變，你可以jsfiddle你的代碼？問候 – 2013-02-28 13:09:43

dm.style.position = "absolut";

應該是

dm.style.position = "absolute";

來源

2013-02-28 12:57:18 graphicdivine

好吧，這是顯而易見的^^但是，我修正後，行爲不會改變。自從我昨天修改這個剪輯以來發生了這個錯誤:( – stefan 2013-02-28 13:42:32

拖放和放置座標下的位置

回答

相關問題