jQuery UI: Ziehbar Scroll Problem

Ich versuche zu bauen, ein ziehbar/abwerfbaren Ordner-Datei anzeigen mit jQuery UI, aber ich laufen in ein problem mit dem, was ich glaube, ist zurückzuführen auf die Helfer. Hier ist mein code:

Die 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>

Die 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');
    }
  });
});

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

Die Geige: jsFiddle

So die Idee ist... Sie ziehen einen der schwarzen Blöcke, um das gewünschte Verzeichnis (Eltern-Verzeichnis-1, Übergeordneten Verzeichnis 2, Mappe 1, etc.). Das scheint alles gut zu funktionieren.

Was nicht funktionieren wird, wenn das übergeordnete (#container) oder Körper haben einen überlauf. Wenn Sie klicken Sie auf einen block zu ziehen und versuchen Mausrad scrollen, können Sie nicht... oder wenn Sie versuchen, Sie manchmal können. (Es ist nicht offensichtlich mit meiner Bildschirm Auflösung, aber in der Fiddle-code, gibt es eine scrollbar für das #container-element) ich gehe davon aus das hat etwas zu tun mit der Ausrichtung der wo ich bin, indem der Helfer.

Weil ich dachte letzteres, ich begann, indem der Helfer an verschiedenen Orten. Mit #container den Bereich, den ich bin am meisten interessiert, kann ich Anhängen der Helfer dort und bekommen das scrollen funktioniert alles wunderbar (die Auskommentierung //appendTo: '#container' und kommentieren Sie die appendTo: 'body').

Jedoch, dies führt zu einem anderen problem. Jetzt, da ich anfügen, um das #container-element, in meinem block kann nicht gesehen werden, wenn es gezogen wird, um die Übergeordnete Verzeichnis 1 Ordner, die dazu führen mich zu glauben, dass es ist etwas falsch mit Helfer.

Sicher genug, wenn Sie nicht Benutzer helper: 'clone', können Sie Blättern, einfach wunderschön. Dies ist nicht eine option, weil ich mit meiner clone gibt. So Wende ich mich an Euch. Wie kann ich das beheben mein problem, und was genau Los ist? Hat jemand einen Tipp? Ich würde es gerne hören.

Es ist auch gut zu beachten, dass ich versucht habe die Einstellung der zIndex-und stack-Optionen für die ziehbar, aber nicht gehen. Ich gehe davon aus, dass ich haben werde, um eine benutzerdefinierte Hilfsfunktion und machen es bewusst, was es derzeit gezogen über... aber ich hoffe, es ist ein einfacher fix.

Wenn jemand keine Einsicht, ich würde es gerne hören. Danke!

Ich bin ein bisschen verwirrt... ist diese 'Helfer' eine default-Methode oder nur einige Variablen, die Sie definiert? Plz clearify, danke!
Hallo Adam, es ist eine option, die Sie festlegen können beim erstellen eines draggable Objekt in jQuery. dieser für weitere Informationen.

InformationsquelleAutor incutonez | 2013-04-15

Schreibe einen Kommentar