拖放添加到購物車功能

我正在爲我的網站測試一些新設計，並決定嘗試運行一點點拖放功能到我的網站。基本上我想要的是用戶能夠將一個項目的圖片拖動到屏幕的右上角（也許是？'位置：固定'框？），然後將這個項目放在正方形中將它添加到用戶購物車。拖放添加到購物車功能

一個簡單的想法，但我從來沒有見過。

任何人都可以幫我實施這個嗎？我不知道如何去做。非常感謝。

到目前爲止，我的工作如下：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="drag.css" /> 
     <script type="text/javascript"> 
     function setupEvents() { 
      document.getElementById('picture').onmousedown = enableDragging; 
      } 
     function enableDragging() { 
      document.onmousemove = dragElement; 
      document.onmouseup = disableDragging; 
      return false; 
      } 
      function dragElement(evt) { 
       document.getElementById('picture').style.left = evt.clientX; 
       document.getElementById('picture').style.top = evt.clientY; 
      return false; 
      } 
      function disableDragging() { 
       document.onmousemove = null; 
       document.onmouseup = null; 
      } 

     </script> 
    </head> 
    <body onload="setupEvents()"> 
     <div> 
      <p><img src="picture.png" alt="picture" id="picture" /></p> 
     </div> 


    </body> 
</html>

來源

2011-04-01 Michael De Brune

如果您的應用程序將是JS重，我建議使用JavaScript庫。它們提供接口和API層，可以降低實現JS重型應用程序的複雜性。我更喜歡jquery，但there are many more libraries out there。

你正在尋找的功能是提供jQueryUI的項目以小工具：http://jqueryui.com/demos/droppable/

有些人可能會覺得反感的是我推薦了一個框架，但它會完成這項工作更快的爲您服務。

編輯

看一看就需要建立一個演示文件這個例子：http://jsbin.com/ejolo6

來源

2011-04-01 11:14:51 JohnP

嗨，非常感謝您的答覆。我正在尋找添加這個功能！我試圖複製粘貼這裏可用的代碼= - http://jqueryui.com/demos/droppable/#shopping-cart並運行它，但它不顯示，因爲它在該網站上。有什麼建議？ – 2011-04-01 11:23:20

它不會那樣工作。您需要包含庫和依賴項。點擊下載鏈接並在下一個屏幕中選擇全部。這爲您提供了一個可用於瀏覽索引的所有可用小部件的完整包。 – JohnP 2011-04-01 11:30:12

我已經給我的答案添加了一個示例。查看源代碼視圖並查看完整示例中包含的文件。 – JohnP 2011-04-01 11:37:59

拖放添加到購物車功能

回答

相關問題