0

I want some piece of code to delete the element dropped on the red div.I need the code to do the following:

  1. Create the clicked element on "Canvas" div.
  2. let the user drag the element

  3. finally let the user delete the element by dropping it to red div. I hope I will get the best solution from here. here is the code:

    function makeResizable(x)
{
  x = $(x);
  x.resizable();

}
function makeDraggable(x)
{

  x = $(x);
      x.draggable();

 }

function createPredefine(){
$element = $(' <img src="img/5.jpg" alt="" height="45" width="110" 
onDblClick="makeResizable(this)" />');
$("#canvas").append($element);
$element.draggable();
}
$(document).ready(function(e) {
$( "#deleting_div" ).droppable({

    drop: function( event, ui ) {

        $(this).children().remove();
                    alert("trigger");

    }
  });
 });

    Create Components

            &nbsp &nbsp <img src="img/5.jpg" alt="" height="45" width="110" 
onClick="createPredefine()"/> &nbsp &nbsp&nbsp &nbsp <img 
src="img/6.jpg" alt="" height="60" width="80" onClick="createCircle()"/>
        <br /><br >



        </div>
</td>
<td>
              <div id="canvas" style="background- 
  color:#FFF;width:800px;height:700px;"> 
              <div id="deleting_div" style="background- 
        color:red;widhth:50px;height:50px;"></div>  
              <h2>&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp 
         &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
              &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
          &nbsp&nbsp&nbsp Draw Here</h2></div>
        </td>
        </tr>
         </table>
       </BODY>
        </HTML>
Qamar Zaman
  • 21
  • 1
  • 4

1 Answers1

0

You can't place a within a canvas (see Placing a <div> within a <canvas>)

Canvas is like a painting, rather than a collection of Lego bricks - what you put on the canvas is flat and permanent. The DOM is more like the collection of Lego bricks; you can pick one up and move it (and everything attached to it will move).

The closest you could get to moving something with a painting would probably just smudge the paint :)

What would probably be the most effective approach for what you are trying to do is create a "virtual" painting/canvas that is built of DOM objects and then "draw" that onto your canvas (see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)

theGleep
  • 1,179
  • 8
  • 14
  • This is a div having id="canvas" just for the sake of understanding. Drawing is working well, I am just asking about to remove the dropped object when drop event is fired from droppable div. – Qamar Zaman Apr 25 '18 at 05:16
  • Oh, ARGH! I didn't notice that! I'm not very familiar with droppable, but doesn't the "drop" event have a reference to the dropped object? If so, I would expect $(dropEvent.droppedObject).remove() to do the trick. – theGleep Apr 25 '18 at 22:14
  • well, thanks ! I've changed the scenario and getting the work done by using some other logic and Click event. – Qamar Zaman Apr 27 '18 at 04:28