I want to drag and drop buttons and images all ui-elements and drag again the element inside canvas

Actually, it works. Check the background color of the a element in fiddle:

https://jsfiddle.net/jakecigar/wngwsxw2/9/

.ui-resizable {
    background: red;
}

Some minor corrections you may want to consider.

JavaScript

function init() {
  var diagram = [];
  var canvas = $(".canvas");
  $(".tool").draggable({
    helper: "clone",
    cancel: false,
  });
  canvas.droppable({
    drop: function(event, ui) {
      console.log(ui.helper.prop("outerHTML"));
      var new_signature;
      if (ui.helper.is('.ui-resizable')) {
        new_signature = ui.helper;
      } else {
        new_signature = ui.helper.clone();
        new_signature.removeClass("ui-draggable ui-draggable-handle ui-draggable-dragging");
        new_signature.draggable({
          helper: false,
          containment: "parent"
        }).resizable();
      }
      $(this).append(new_signature);
    }
  });
}

$(init);

Fiddle: https://jsfiddle.net/Twisty/0gLh2h6o/

Update

Often, it is best to avoid using draggable and resizable on some things, when there are other Click events that will be handled.

I would suggest creating a wrapper, and handle, that can be used to drag the element, and then resize upon the element.

Consider this:

HTML

<div style="width:20%;float:left;border:1px solid; height:400px">
  <h6>buttons</h6>
  <div>
    <div class="fake tool button tool-1">Click</div>
    <br/>
    <div class="fake tool button tool-2">Click</div>
    <hr />
  </div>
</div>
<div style="width:78%;height:400px;float:right;border:1px solid;" class="canvas">
  <p>
    canvas
  </p>

</div>
note:i want to drag these button multiple time and once it dopped inside canvas it can be draggable inside canvas and resizable

CSS

.tool-1,
.tool-2 {
  width: 60px;
  height: 1.5em;
  border: 1px red solid;
  border-radius: .2em;
  text-align: center;
  padding: 0.5em;
}

.tool-2 {
  border: 1px green solid;
}

.canvas .tool_wrapper {
  display: inline-block;
  width: auto;
  height: auto;
}

.canvas .tool_wrapper .tool_handle {
  height: 10px;
  line-height: 10px;
  padding: 0;
  margin: 0;
  text-align: right;
}

.canvas .tool_wrapper .tool_handle .ui-icon {
  margin-top: -.30em;
}

.canvas .tool_wrapper .ui-resizable-se {
  margin-left: -5px;
  margin-top: -5px;
}

.canvas .tool_wrapper .button {
  width: 60px;
  height: 1.5em;
  border-radius: .2em;
  text-align: center;
  padding: 0.5em;
}

JavaScript

function init() {
  var diagram = [];
  var canvas = $(".canvas");
  $(".tool").draggable({
    helper: "clone",
    cancel: false,
  });
  canvas.droppable({
    drop: function(event, ui) {
      console.log(ui.helper.attr("class"));
      if (ui.helper.hasClass("fake")) {
        var new_signature;
        if (ui.helper.hasClass("button")) {
          new_signature = $("<div>", {
            class: "tool_wrapper ui-widget",
            style: ui.helper.attr("style")
          });
          new_signature.css("top", (parseInt(new_signature.css("top").substr(0, -2)) - 10) + "px")
          var handle = $("<div>", {
              class: "tool_handle ui-widget-header"
            })
            .html("&nbsp;").appendTo(new_signature);
          var close = $("<span>", {
            class: "ui-icon ui-icon-close"
          }).appendTo(handle).click(function() {
            if (confirm("Are you sure you want to remove this Button?")) {
              new_signature.remove();
            }
          });
          var tool = $("<div>", {
              class: ui.helper.attr("class"),
              contenteditable: true
            })
            .html(ui.helper.html())
            .appendTo(new_signature).resizable();
          tool.css({
            width: "60px",
            height: "1.5em",
            "line-height": "inherit"
          });
          tool.removeClass("fake ui-draggable ui-draggable-handle ui-draggable-dragging");
        }
        new_signature.appendTo($(this));
        new_signature.draggable({
          handle: ".tool_handle",
          helper: false,
          containment: "parent"
        })
      }
    }
  });
}

$(init);

Here, we create a div wrapper and create a handle, with a close button, to use to move the element around. This becomes our draggable, and we can place a button, div, or img inside it. This allows contenteditable to receive it's own cl;ick event and not interfere with the click event that draggable is expecting, since it will only be looking for that on the handle.

Resizable is then assigned to the element itself to ensure that we change it's size and not just the size of the wrapper.

The new_signature element has position:static after it is set to draggable. It needs to be absolute. Use Twisty's version, add this lines: cancel: false after containment: "parent", and new_signature.css({position: 'absolute'}); just before $(this).append(new_signature);

It worked in my test.