jQuery - creating a new draggable div on mousedown which can then be dragged in the same action

Question

I want to dynamically create a draggable div on mousedown, which within the same mousedown event can then be dragged into a droppable area and dropped.

The point that I have got to so far is that a new draggable div is created on mousedown and that div then follows the cursor. But it cannot be dropped into the droppable area.

JS Fiddle here - http://jsfiddle.net/rqyv6bpg/

The jQuery code:

jQuery(document).ready(function ($) {

//on mousedown, creates a new draggable div in the cursor position
$(".search-result-container").mousedown(function(e){

var x = e.pageX + 'px';
var y = e.pageY + 'px';

  $('<div/>', {
    "class": "test",
    text: "Draggable track that can be dropped into droppable queue!",
  }).css({
  "position": "absolute",                    
  "left": x,
  "top": y,
  "z-index": 1000
}).draggable()
    .appendTo($(document.body))
});

//in order to get the newly created div to instantly follow the cursor
$(document).on('mousemove', function(e){
$('.test').css({
   left:  e.pageX,
   top:   e.pageY
});
});

$( "#queue-bar" ).droppable();

});

Help would be greatly appreciated! Thanks in advance.

Answer 1

If I understood correctly, you are looking for the helper option of draggable widget.

 $(document).ready(function($) {
  $(".search-result-container").draggable({
    helper: "clone", // use a clone for the visual effect
    revert: false
  });
  $("#queue-bar").droppable({
    accept: "article",
    drop: function(event, ui) {
      ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
    }
  });
});

$(document).ready(function($) {
  $(".search-result-container").draggable({
    helper: "clone", // use a clone for the visual effect
    revert: false
  });
  $("#queue-bar").droppable({
    accept: "article",
    drop: function(event, ui) {
      ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
    }
  });
});

.search-result-container {
  background-color: red
}
#queue-bar {
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>

You can also create a custom helper by returning an element to be used as helper as shown below:

$(document).ready(function($) {
  $(".search-result-container").draggable({
    helper: function(){
      // return a custom element to be used for dragging
      return $("<div/>",{ 
        text: $(this).text(),
        class:"copy"
      })
    }, // use a clone for the visual effect
    revert: false
  });
  $("#queue-bar").droppable({
    accept: "article",
    drop: function(event, ui) {
      //you might want to reset the css using attr("style","")
      ui.helper.clone().appendTo(this); // actually append a clone of helper to the droppable
    }
  });
});

.search-result-container {
  background-color: red;
}
#queue-bar {
  background-color: blue;
}
.copy{
   background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>

Answer 2

Updated your fiddle, it works now!!

http://jsfiddle.net/rqyv6bpg/2/

Here is the JS code:

 $( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
    drop: function( event, ui ) {
        $( this ).append( "<br/>"+ui.draggable.html() );
    }
});