2011-12-12 89 views
-2

我的項目是一個畫布(不是HTML5元素),用戶可以在其中添加圖像,移動它們並調整它們大小。我想將畫布區域設爲「垃圾桶」,拖動時圖像消失。有誰知道如何實現這一點?拖動到垃圾桶jquery

+0

**是**是我做的。請重新說明你的問題,所以它不是**是/否... – Neal

回答

0

見一個例子來拖/放和刪除對象..

<!DOCTYPE HTML> 
<html lang="en-US"> 
     <head> 
       <meta charset="UTF-8"> 
       <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
       <style type="text/css"> 
        #images .img{ 
          padding : 50px; 
          border : 1px solid #ccc; 
          width : 50px; 
          height : 50px; 
          margin : 25px; 
          float : left; 
        } 
        #trash{ 
          padding   : 50px; 
          background-color : #f1f1f1; 
        } 
       </style> 
       <script type="text/javascript"> 
        $(function(){ 
          $('.img').draggable({ 
            opacity : 0.7, 
            revert : 'invalid', 
            helper : 'clone', 
            zIndex : 100, 
            cursor : 'move' 
          }); 
          $('#trash').droppable({ 
            drop : function (event , img) { 
              var $element = img.draggable; 
              alert ($element.attr('id')) ; 
              $element.detach(); 
            } 
          }); 
        }); 
       </script> 
     </head> 
     <body> 
       <div id="images"> 
        <div class="img" id="1">1</div> 
        <div class="img" id="2">2</div> 
        <div class="img" id="3">3</div> 
        <div class="img" id="4">4</div> 
       </div> <br clear="both" /> 
       <div id="trash"> 
        ------------- 
       </div> 
     </body> 
</html> 
+0

@ Andrey_Knupp - 你能解釋一下'drop'功能嗎?你通過什麼參數?在這種情況下'.draggable'是什麼? – dopatraman