Question

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

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

拖到垃圾jquery

1 个答案: