title: Allowing the drag after dropping an image onto canvas
body: <pre><code>$(function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  // get the offset position of the container
  var $canvas = $("#canvas");
  var Offset = $canvas.offset();
  var offsetX = Offset.left;
  var offsetY = Offset.top;
  
  // select all .tool's
  var $tools = $(".tool");
  
  // make all .tool's draggable
  $tools.draggable({
  helper: 'clone',
  revert: 'invalid'
  });
  
  
      // assign each .tool its index in $tools
  $tools.each(function (index, element) {
  $(this).data("toolsIndex", index);
  });
  
  // make the canvas a dropzone
  $canvas.droppable({
  drop: dragDrop,
  });
  
  // handle a drop into the canvas
  function dragDrop(e, ui) {
  
  // get the drop point (be sure to adjust for border)
  var x = parseInt(ui.offset.left - offsetX);
  var y = parseInt(ui.offset.top - offsetY);
  
  // get the drop payload (here the payload is the $tools index)
  var theIndex = ui.draggable.data("toolsIndex");
  
  // drawImage at the drop point using the dropped image 
  ctx.drawImage($tools[theIndex], x, y, 32, 32);
  
  }
  });
  </code></pre>
  
  <p>I tried many things but I failed. This code allows me to drag and drop multiple images onto a canvas element. What I need to do is to add the possibility of dragging the image again after it's been dropped. I know that the canvas has to be redrawn each time, but I didn't know how.</p>
  
  <p>Can anyone fix this for me?</p>