个人中心
gpt4 book ai didi

jQuery 用户界面 : Draggable Scroll Issue

转载 作者：行者123 更新时间：2023-12-03 23:05:37 26 4
gpt4 key购买 nike

我正在尝试使用 jQuery UI 构建一个可拖放的文件夹文件 View ，但我遇到了一个问题，我认为这归因于助手。这是我的代码:

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

fiddle :jsFiddle

所以想法是...将黑色 block 之一拖到所需的文件夹(父目录 1、父目录 2、文件夹 1 等)。这一切似乎都运行良好。

当父级(#container)或主体溢出时，工作不正常。如果您单击要拖动的 block 并尝试使用鼠标滚轮滚动，则无法...或者如果您继续尝试，有时可以。 (这对于我的屏幕分辨率来说并不明显，但在 Fiddle 代码中，#container 元素有一个滚动条)我假设这与我将助手附加到的焦点有关。

因为我开始考虑后者，所以我开始将助手附加到不同的位置。由于 #container 是我最感兴趣的区域，我可以在那里附加帮助程序并使滚动正常工作(取消注释//appendTo: '#container' 并注释掉appendTo: 'body')。

但是，这引入了另一个问题。现在我正在附加到 #container 元素，当我的 block 被拖到 Parent Directory 1 文件夹时，我的 block 就看不到了，这让我相信 helper 出了问题。

果然，如果你不使用helper: 'clone'，你也可以漂亮地滚动。这不是一个选择，因为我喜欢在那里拥有我的克隆。所以我转向你们。我该如何解决我的问题，到底发生了什么？有人有建议吗？我很想听听。

值得注意的是，我已经尝试为可拖动设置 zIndex 和堆栈选项，但没有成功。我假设我必须创建一个自定义辅助函数，并让它知道当前正在拖拽什么......但我希望有一个更简单的解决方案。

如果有人有任何见解，我很想听听。谢谢!

最佳答案

这是 fiddle 的代码: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 用户界面 : Draggable Scroll Issue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16020798/

26 4 0
文章推荐： jquery - 流程图工具提示错误 - 工具提示日期比 X 轴日期晚一天
文章推荐： PHP 应用程序状态
文章推荐： url - URL主机中可以显示哪些有效字符？
文章推荐： 具有 MVC4 内容的 jQuery 选项卡
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com