Javascript jQuery-在mousedown上创建一个新的可拖动div，然后可以在相同的操作中拖动它

我想在mousedown上动态创建一个可拖动的div，在同一个mousedown事件中，它可以被拖动到一个可拖放的区域并被拖放

到目前为止，我要说的是在mousedown上创建一个新的可拖动div，然后该div跟随光标。但不能将其放入可放置区域

在这里拉小提琴-

jQuery代码：

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();

});

jQuery（文档）.ready（函数（$）{
//鼠标向下移动时，在光标位置创建一个新的可拖动div
$（“.search result container”）.mousedown（函数（e）{
var x=e.pageX+‘px’；
变量y=e.pageY+‘px’；
$('', {
“类”：“测试”，
文本：“可拖放的轨道，可放入可拖放队列！”，
}).css({
“位置”：“绝对”，
“左”：x，
“顶部”：y，
“z指数”：1000
}).draggable（）
.appendTo（$（document.body））
});
//以使新创建的div立即跟随光标
$（文档）.on（'mousemove'，函数（e）{
$（'.test'）.css({
左：e.pageX，
顶部：e.pageY
});
});
$（“#队列栏”）.dropable（）；
});

---

非常感谢您的帮助！提前谢谢

如果我理解正确的话，您正在寻找选择

$（文档）.ready（函数（$）{
$（“.search result container”）.draggable({
helper:“clone”//使用克隆获得视觉效果
回复：false
});
$（“#队列栏”）。可拖放({
接受：“条款”，
drop：函数（事件、用户界面）{
ui.draggable.clone（）
}
});
});
。搜索结果容器{
背景颜色：红色
}
#排队栏{
背景颜色：蓝色
}

这是一条信息丰富的赛道
这是可放下的区域
更新了你的小提琴，现在可以用了


以下是JS代码：

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

$（“.text”）.draggable（{helper:'clone'}）；
$（“#队列栏”）。可拖放({
drop：函数（事件、用户界面）{
$（this.append（“
”+ui.draggable.html（））；
}
});
非常感谢您的回答。但是，由于“搜索结果容器”包含大量信息（文本和图像），其目的是在mousedown上实际创建一个新的div，其中只包含该信息的一段片段（文本），然后可以将其放入队列区域，而不是整个“搜索结果容器”的克隆。你能修改你的答案来帮助我实现这一点吗？许多的thanks@SeanStevens更新了答案。非常感谢你的回答。但是，由于“搜索结果容器”包含大量信息（文本和图像），其目的是在mousedown上实际创建一个新的div，其中只包含该信息的一段片段（文本），然后可以将其放入队列区域，而不是整个“搜索结果容器”的克隆。你能修改你的答案来帮助我实现这一点吗？非常感谢
 $( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
    drop: function( event, ui ) {
        $( this ).append( "<br/>"+ui.draggable.html() );
    }
});