拖动到垃圾jQuery [关闭]答案

【问题标题】：drag to trash jquery [closed]拖动到垃圾jQuery [关闭]
【发布时间】：2011-12-12 18:00:38
【问题描述】：

我的项目是一个画布（不是 HTML5 元素），用户可以在其中添加图像、移动它们并调整它们的大小。我想让画布的一个区域成为“垃圾桶”，拖到该区域时图像会消失。有谁知道如何实现这个？

【问题讨论】：

是的是的，我愿意。请重新表述您的问题，使其不是是/否...

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

查看一个拖放和删除对象的示例..

<!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>

【讨论】：

@Andrey_Knupp--您能解释一下drop 函数吗？你传递的参数是什么？在这种情况下，.draggable 是什么？