Question

我正在尝试使用jQuery UI构建一个可拖动/可放置的文件夹文件视图，但我遇到了一个问题，我相信这个问题归功于帮助器。这是我的代码：

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

小提琴：jsFiddle

所以想法是......你将其中一个黑色块拖到所需的文件夹（父目录1，父目录2，文件夹1等）。这一切似乎都很好。

什么不能正常工作是父（#container）或正文有溢出。如果你点击一个块来拖动并试图滚动鼠标滚轮，你就不能......或者如果你继续尝试，你有时可以。（我的屏幕分辨率并不明显，但在小提琴代码中，有一个#container元素的滚动条）我假设这与我追加帮助的地方的焦点有关。

因为我开始考虑后者，所以我开始将帮助器附加到不同的位置。由于#container是我最感兴趣的区域，我可以在那里附加帮助器并使滚动工作得很好（取消注释// appendTo：'＃container'并注释掉appendTo：'body'）。

然而，这引入了另一个问题。现在我正在追加#container元素，当它被拖到父目录1 文件夹时，我的块无法看到，这让我相信帮助器有问题。< / p>

果然，如果您没有使用帮助：'克隆'，您可以精美滚动。这不是一个选项，因为我喜欢在那里使用我的克隆。所以我转向你们。我该如何解决我的问题，以及到底发生了什么？有人有建议吗？我很乐意听到它。

我还注意到我已经尝试为draggable设置zIndex和堆栈选项，但是没有去。我假设我必须制作一个自定义辅助函数，并让它知道它当前被拖过的东西......但我希望有一个更容易修复。

如果有人有任何见解，我很乐意听到。谢谢！

Answer 1

来自小提琴的代码：http://jsfiddle.net/crowjonah/Fr7u8/3/

<强> HTML：

<table>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
</table>

<div class="upper"></div>
<div class="drop_area">
<ul>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
</ul>
</div>
<div class="lower"></div>

<强> jQuery的：

$('.drag_me').draggable({
    helper: 'clone',
    scroll: 'true',
    refreshPositions: true
});

$('.drop_on_me').droppable({
    accept: '.drag_me',
    activeClass: 'active',
    hoverClass: 'hover',
    tolerance: 'pointer'
});
$('.upper').droppable({
            over: function(event, ui){
                $('.drop_area').autoscroll({
                    direction: 'up',
                    step: 150,
                    scroll: true
                });
            },
            out: function(event, ui){
                $('.drop_area').autoscroll('destroy');
            }
        });

        $('.lower').droppable({
            over: function(event, ui){
                $('.drop_area').autoscroll({
                    direction: 'down',
                    step: 150,
                    scroll: true
                });
            },
            out: function(event, ui){
                $('.drop_area').autoscroll('destroy');
            }
        });

与此问题相关：jQuery UI: Draggable Scroll Issue

它是具有overflow: scroll

的容器内可拖动元素的工作示例

jQuery UI：可拖动滚动问题

1 个答案: