title: create element and drag it with one click with jquery ui
body: <p>I know about jQuery UI and draggable and droppable, in my case I don't have any element because I don't know client how many item needed, I want when client click with mouse <code>onmousedown</code> element created, then without releasing mouse, and <code>onmousemove</code> element moving around page until droppable zone, when mouse release <code>onmouseup</code> if element in droppable zone, do something and if not in droppable zone element will be removed, I can create, remove, and move element when mouse release first time and click again on created element, I want move it with one click and mouse move;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let flag_create_element = false;
  let flag_mouse_down = false;
  $('.btn_create').off('mousedown').on('mousedown', function (event) {
      flag_mouse_down = true;
      flag_create_element = true;
      let created_option_title = '&lt;div class="new-element-added"&gt;&lt;/div&gt;';
      if (flag_create_element){
          $('body').append(created_option_title);
          $('.new-element-added').draggable();
      }
  });
  $('body').off('mousemove').on('mousemove',function (event) {
      $(this).on('mousemove', createAndMoveElement(event));
  }).off('mouseup').on('mouseup', function () {
      flag_mouse_down = false;
      flag_create_element = false;
      //$('.new-element-added').remove();
  });
  
  function createAndMoveElement(event) {
      if (flag_mouse_down){
          $('.new-element-added').draggable();
      }
      flag_create_element = false;
  }
  
  
  $('#droppable_zone').droppable({
      drop: function () {
          alert('ok');
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#droppable_zone{
  position: fixed;
  left: 0;
  right:0;
  top:0;
  bottom:0;
  margin: auto;
  width: 50vw;
  min-height: 50vh;
  background-color: bisque;
  }
  .btn_create{
  position: absolute;
  left:0;
  top:0;
  width: 45px;
  height: 45px;
  background-color: green;
  }
  
  .new-element-added{
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  display: block;
  z-index: 999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;article id="droppable_zone"&gt;
  
  
  &lt;/article&gt;
  
  &lt;button type="button" class="btn_create"&gt;
  &lt;i class="fas fa-plus align-middle font-15"&gt;&lt;/i&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>