пытаюсь создать перетаскиваемый / сбрасываемый вид файла папки с помощью jQuery UI, но яЯ столкнулся с проблемой, которая, как я считаю, приписывается помощнику. Вот мой код:

HTML

  
    <span>Parent Directory 1</span>
  
  <span id="topFolder" class="folder">
    
    
  </span>
  
  
    
      <span>Parent Directory 2</span>
    
    
      
        <span>Folder 1</span>
      
      <span id="folder1" class="folder">
        
           
           
           
           
           
           
           
           
           
           
           
           
        
      </span>
    
    
      
        <span>Folder 2</span>
      
      <span id="folder2" class="folder">
        
        
      </span>
    
    
      
        <span>Folder 3</span>
      
      <span id="folder3" class="folder">
        
        
      </span>
    
    <span id="mainFolder" class="folder">
      
         
      
    </span>
  

JQuery

$(document).ready(function () {
  var opts = {
    helper: 'clone',
    appendTo: 'body'
    //appendTo: '#container'
  };

  $('div.drag').each(function () {
    $(this).draggable(opts);
  });

  $('.dropzone, #topContainer').droppable({
    drop: function (e, ui) {
      var clone = $(ui.draggable).clone();
      clone.draggable(opts);
      $(this).siblings('.folder').children('.drop').append(clone);
      $(this).removeClass('over');
    },
    over: function (e, ui) {
      $(this).addClass('over');
    },
    out: function (e, ui) {
      $(this).removeClass('over');
    }
  });
});

CSS

.dropzone {
    height: 300px;
    width: 100px;
    border: 1px solid black;
}
.drag {
    clear: both;
    height: 50px;
    width: 80px;
    background-color: black;
    position: relative;
    cursor: pointer;
}
#topContainer, .dropzone {
    height: 50px;
    width: 300px;
    border: 2px solid black;
    text-align: center;
}
.folder .drag {
    margin: 5px;
}
.container {
    border: 2px solid blue;
    margin: 10px;
}
.over {
    background-color: yellow;
}    
#container {
    width: 800px;
    height: 600px;
    overflow-y: scroll;
    border-color: red;
    position: relative;
}

Скрипка:jsFiddle

Идея такова: вы перетаскиваете один из черных блоков в нужную папку (Родительский каталог 1, Родительский каталог 2, Папка 1 и т. Д.). Кажется, что все работает нормально.

Что ненормально работает, когда родитель (#container) или тело имеют переполнение. Если вы нажмете на блок для перетаскивания и попытаетесь прокрутить колесо мыши, вы можете 'т ... или если вы продолжаете пытаться, вы иногда можете. (Это'с моим разрешением экрана это не очевидно, но в коде Fiddle есть полоса прокрутки для элемента #container)Я предполагаю, что это как-то связано с тем, где яЯ добавляю помощника в.

Поскольку я начал думать о последнем, я начал добавлять помощника в разные места. С #container - это область, которую яМеня больше всего интересует, я могу добавить туда помощника и заставить свиток работать нормально (раскомментируйте // appendTo: '#контейнер' и закомментируйте приложение:тело»).

Однако это создает другую проблему. Теперь, когда ядобавив элемент #container, мой блок не будет виден, если его перетащить вРодительский каталог 1 папка, которая заставляет меня поверить, что с помощником что-то не так.

Конечно же, если вы нет пользовательпомощник:клон»Вы можете прокручивать просто красиво. Это не вариант, потому что мне нравится, когда мой клон там. Так что я обращаюсь к тебевсе. Как я могу решить мою проблему, и что именно происходит? У кого-нибудь есть совет? Я'Я хотел бы услышать это.

Это'Также приятно отметить, что ямы попытались установить параметры zIndex и стека для перетаскиваемого объекта, но не пошли. Я'Я предполагаю, что яЯ должен сделать пользовательскую вспомогательную функцию и сделать так, чтобы онав настоящее время перетаскивается ... но яя надеюсь на этопроще исправить.

Если у кого-то есть понимание, яЯ хотел бы услышать это. Спасибо!