将文件拖放到特定目标

Question

我列出了这样的一组媒体文件元素。

我想将媒体文件从Windows资源管理器上传到此列表的特定目标（例如-应该可以在“标题A”上方或“标题A”下方添加文件）。我知道如何上传文件，如果要添加到列表的末尾，这对我来说是可以实现的。我没有得到的是如何获得需要上传的特定职位。

（如果它是一个DOM元素，我本可以使用jQuery可拖动的droppble，但再次在这里不可能！：（。）

我正在使用余烬，并且已经创建了组件并将其添加到每个元素之后

abc: $('<div class="bla"></div>'),

didInsertElement() {
    this._super(...arguments);  
    var self = this;

$('.xyz').bind("dragenter", function (evt) {
  event.preventDefault();
  event.stopPropagation();
  var targetElement = $(evt.target).prev();
  var holder = self.get('abc');
  targetElement.after(holder);
});

$('.xyz').bind("dragleave", function (evt) {
    event.preventDefault();
    $('.bla').detach();
});  

$('.xyz').bind("drop", function (evt) {
    event.preventDefault();
    $('.bla').detach();
 });
},

有了这个，我可以在目标元素下面成功添加一个div。但是使用“ dragleave”，它每次都在执行，因此每次都在分离，而且如果我不想将其拖放到窗口外，也根本不会分离（例如dragend吗？）

.bla{
   position: relative;
   clear: both;
   cursor: default;
   margin-top: 2px;
   min-height: 32px;
   line-height: 32px;
   overflow: hidden;
   background-color: white;
   border: 1px solid #999;
}

有帮助吗？！

谢谢。