jjzjj

javascript - 在靠近底部的地方拖动时在可移动的 DIV 内部滚动

coder 2024-07-25 原文

我在一个可滚动的 div 中有多个可拖动的 div。当我将它们拖入可放置区域(这也是一个可滚动的 div)时，可放置的 DIV 不会向下滚动。只是页面在移动。 怎么说，只有可放置的 div 应该在拖动时滚动？

这是我当前用于使 div 可拖动的 jquery 代码

$(".drag_item").draggable({
        helper: 'clone',
        scroll: true, 
        drag: function( event, ui ) {
            $(this).css('z-index','100');
        }
    });

最佳答案

我想到了这个解决方案:

var direction = {};
var bound = {};
var scrolling = false;
var container = document.getElementById("container");

$('#table-container')
.on('dragstart', draggable, function(event, ui) {
  bound = {
    right : $(container).offset().left + $(container).width() - 50,
    left : $(container).offset().left + 50,
    top : $(container).offset().top + 50,
    bottom : $(container).offset().top + $(container).height() - 50
  };
})
.on('dragstop', draggable, function(event, ui) {
  direction = {};
})
.on('drag', draggable, function(event, ui) {
  direction.right = event.clientX - bound.right;
  direction.left = bound.left - event.clientX;
  direction.up = bound.top - event.clientY;
  direction.down = event.clientY - bound.bottom;

  if ((direction.right > 0 || direction.left > 0|| direction.up > 0 || direction.down > 0) && !scrolling) {
    scroll();
    scrolling = true;
  } else {
    scrolling = false;
  }
});

function scroll() {
  if (direction.right > 0) {
    container.scrollLeft = container.scrollLeft + (direction.right >> 1); //dividing by 2 to soften effect
  }
  if (direction.left > 0) {
    container.scrollLeft = container.scrollLeft - (direction.left >> 1);   
  }
  if (direction.down > 0) {
    container.scrollTop = container.scrollTop + (direction.down >> 1);
  }
  if (direction.up > 0) {
    container.scrollTop = container.scrollTop - (direction.up >> 1);
  }

  if (direction.right > 0 || direction.left > 0 || direction.up > 0 || direction.down > 0) {
    setTimeout(scroll, 100);
  }
}

关于javascript - 在靠近底部的地方拖动时在可移动的 DIV 内部滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15545811/

javascriptDIVdirectioncontainersectionjquerycssdrag-and-drop

有关javascript - 在靠近底部的地方拖动时在可移动的 DIV 内部滚动的更多相关文章

  1. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  2. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 是否可以从也在该模块中的类内部调用模块函数 - 2

    在这段Ruby代码中:ModuleMClassC当我尝试运行时出现“'M:Module'的未定义方法'helper'”错误c=M::C.new("world")c.work但直接从另一个类调用M::helper("world")工作正常。类不能调用在定义它们的同一模块中定义的模块函数吗？除了将类移出模块外，还有其他解决方法吗？ 最佳答案 为了调用M::helper，你需要将它定义为defself.helper;结束为了进行比较，请查看以下修改后的代码段中的helper和helper2moduleMclassC

  5. ruby - 无法安装 gem - make 未被识别为内部或外部命令可运行程序或批处理文件 - 2

    我想在Windows7上安装带有ruby​​1.9.3的rspec-railsgem。我收到一些错误消息，提示无法安装某些json库。所以，我使用下面的说明来解决它。来源=The'json'nativegemrequiresinstalledbuildtools从[rubyinstaller.org][3]下载[Ruby1.9.3][2]从[rubyinstaller.org][3]下载DevKit文件对于Ruby1.9.3，使用[DevKit-tdm-32-4.5.2-20110712-1620-sfx.exe][4]将DevKit解压到路径C:\Ruby193\DevKit运行cd

  6. ruby - 如何在 Ruby 中实现私有(private)内部类 - 2

    来自Java，我正在尝试在Ruby中实现LinkedList。我在Java中实现它的通常方法是有一个名为LinkedList的类和一个名为Node的私有(private)内部类，其中LinkedList的每个对象都作为Node对象。classLinkedListprivateclassNodeattr_accessor:val,:nextendend我不想将Node类暴露给外部世界。然而，通过Ruby中的这个设置，我可以使用这个访问LinkedList类之外的私有(private)Node类对象-node=LinkedList::Node.new我知道，在Ruby1.9中，我们可以使用

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby - Lisp 作为内部 Ruby DSL？ - 2

    我已经能够找到:a)用Ruby编写的Lisp解释器(即外部DSL)http://onestepback.org/index.cgi/Tech/Ruby/LispInRuby.redb)作为RubyDSL的Prologhttp://www.kdedevelopers.org/node/2369c)讨论Ruby“作为”一个Lisphttp://www.randomhacks.net/articles/2005/12/03/why-ruby-is-an-acceptable-lisp但奇怪的是，我实际上找不到Lisp的“内部”实现，例如Prolog的实现。我只是不够谷歌，还是还没有人发表过这

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐