Home/ Questions/Q 6923673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:33:55+00:00

My project is a canvas (not HTML5 element) where a user can add images,

  • 0

My project is a canvas (not HTML5 element) where a user can add images, move them around, and resize them. I want to make an area of the canvas a “trash can” where images disappear when dragged to. Does anyone know how to implement this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See one example to drag/drop and remove objects ..

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