Перетащите файл к определенной цели - PullRequest
Новая
       19

Перетащите файл к определенной цели

0 голосов
/ 17 октября 2018

У меня есть набор элементов медиа-файлов, перечисленных как это.

enter image description here

Я хочу загрузить мультимедийный файл из проводника Windows в конкретную цель этого списка (например, должна быть возможность добавить файл выше«Заголовок А» или ниже «Заголовок А» ...).Как этого добиться? Я знаю, как загрузить файл, и для меня это достижимо, если его добавить в конец списка.Чего я не понимаю, так это как получить конкретную позицию, которую мне нужно загрузить.

(Если бы это был элемент DOM, я мог бы использовать jQuery draggable droppble, но, опять же, здесь это невозможно! :(.)

Я использую ember, и я создал компонент и добавил его после каждого элемента 

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;
}

Любая помощь ?!

Спасибо.

...