jQuery UI: zagadnienie przeciągania i przewijania

Question

Apr 15, 2013, 07:03 PM

jquery mousewheel jquery-ui jquery-ui-draggable positioning

jQuery UI: zagadnienie przeciągania i przewijania

Usiłuję zbudować przeciągalny / upuszczalny widok pliku folderów za pomocą interfejsu użytkownika jQuery, ale napotykam na problem z tym, co moim zdaniem jest przypisywane do pomocnika. Oto mój kod:

HTML

<body>
  <div id="topContainer">
    <span>Parent Directory 1</span>
  </div>
  <span id="topFolder" class="folder">
    <div class="drop">
    </div>
  </span>
  <hr />
  <div id="container" class="container">
    <div class="dropzone">
      <span>Parent Directory 2</span>
    </div>
    <div id="cont1" class="container">
      <div class="dropzone">
        <span>Folder 1</span>
      </div>
      <span id="folder1" class="folder">
        <div class="drop">
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
          <div class="drag">&nbsp;</div>
        </div>
      </span>
    </div>
    <div id="cont2" class="container">
      <div class="dropzone">
        <span>Folder 2</span>
      </div>
      <span id="folder2" class="folder">
        <div class="drop">
        </div>
      </span>
    </div>
    <div id="cont3" class="container">
      <div class="dropzone">
        <span>Folder 3</span>
      </div>
      <span id="folder3" class="folder">
        <div class="drop">
        </div>
      </span>
    </div>
    <span id="mainFolder" class="folder">
      <div class="drop">
        <div class="drag">&nbsp;</div>
      </div>
    </span>
  </div>
</body>

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

Skrzypce: jsFiddle

Więc pomysł jest ... przeciągnij jeden z czarnych bloków do żądanego folderu (Katalog nadrzędny 1, Katalog nadrzędny 2, Folder 1 itd.). Wszystko wydaje się działać dobrze.

To, co nie działa dobrze, to sytuacja, w której rodzic (#container) lub ciało mają przepełnienie. Jeśli klikniesz blok, aby przeciągnąć i spróbować przewinąć kółko myszy, nie możesz ... lub jeśli będziesz próbował, czasami możesz. (Nie jest to oczywiste w przypadku mojej rozdzielczości ekranu, ale w kodzie Fiddle istnieje pasek przewijania dla elementu #container). Zakładam, że ma to coś wspólnego z tym, do czego dołączam pomocnika.

Ponieważ zacząłem myśleć o tym drugim, zacząłem dołączać pomocnika do różnych lokalizacji. Ponieważ #container jest obszarem, który mnie najbardziej interesuje, mogę dołączyć tam pomocnika i sprawić, że przewijanie będzie działać dobrze (uncomment // appendTo: '#container' i skomentuj appendTo: 'body').

Wprowadza to jednak inny problem. Teraz, gdy dołączam do elementu #container, mojego bloku nie można zobaczyć, gdy jest on przeciągany doKatalog nadrzędny 1 folder, co prowadzi mnie do przekonania, że coś jest nie tak z pomocnikiem.

Oczywiście, jeśli nie używaszpomocnik: „klon”, możesz pięknie przewijać. To nie jest opcja, ponieważ lubię mieć tam mój klon. Więc zwracam się do wszystkich. Jak mogę rozwiązać swój problem i co dokładnie się dzieje? Czy ktoś ma jakieś rady? Chciałbym to usłyszeć.

Warto również zauważyć, że próbowałem ustawić opcje zIndex i stosu przeciągania, ale nie idź. Zakładam, że będę musiał utworzyć niestandardową funkcję pomocniczą i uświadomić sobie, co jest obecnie przeciągane ... ale mam nadzieję, że łatwiej będzie naprawić.

Gdyby ktoś miał wgląd, chciałbym to usłyszeć. Dzięki!