草庐IT

javascript - 当拖动然后将项目垂直放置在可排序的网格中时，Packery 会中断垂直对齐

coder 2025-01-17 原文

我在尝试使用 packery 和 draggabilly 创建可排序的项目网格时遇到问题。

我也尝试过 jquery ui dragabble，但问题仍然存在。当我拖放项目时，可能会破坏垂直对齐方式，因此项目会“捕捉”到行的一部分。这也打乱了项目的顺序。

http://jsfiddle.net/foobass/sasrx654/

如果您水平拖动一个项目，它会卡入到位并很好地对齐。如果您垂直拖动，您可能会失去对齐，它不会正确地卡入到位。最后一个项目的位置也发生了变化。

任何人都可以建议我可能做错了什么吗？

   var container = document.querySelector('#container');

   var packery = new Packery(container, {
        rowHeight: '.module-sizer',
        itemSelector: '.module',
        columnWidth: '.module-sizer',
        isInitLayout: true,
        isResizeBound: true
   });

似乎出于某种原因，掉落项目的“顶部”css 值和下面的项目被动态设置为不正确的值。

最佳答案

我知道已经晚了，但我自己正在搜索这个问题，所以也许有人需要这个。

Packery 的布局系统与我们需要的 Packery 在垂直拖动时的行为方式不同，因此我们需要一种解决方法。我已经设法解决了垂直对齐问题，以重新布局“dragItemPositioned”上的包装，就像这样；

packery.on( 'dragItemPositioned', function( event, draggedItem ) {
    app.tiles.settings.packeryEl.packery();
});

关于javascript - 当拖动然后将项目垂直放置在可排序的网格中时，Packery 会中断垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25192416/

中时javascriptsectionpackerydrag-and-dropdraggable

有关javascript - 当拖动然后将项目垂直放置在可排序的网格中时，Packery 会中断垂直对齐的更多相关文章

  1. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  2. ruby - 按值降序排列散列，然后按升序键入 ruby - 2

    我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做？例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500

  3. ruby - ruby 乘法语句中星号中断语法前的空格 - 2

    在添加一些空格以使代码更具可读性时(与上面的代码对齐)，我遇到了这个:classCdefx42endendm=C.new现在这将给出“错误数量的参数”:m.x*m.x这将给出“语法错误，意外的tSTAR，期待$end”:2/m.x*m.x这里的解析器到底发生了什么？我使用Ruby1.9.2和2.1.5进行了测试。 最佳答案 *用于运算符(42*42)和参数解包(myfun*[42,42])。当你这样做时:m.x*m.x2/m.x*m.xRuby将此解释为参数解包，而不是*运算符(即乘法)。如果您不熟悉它，参数解包(有时也称为“spl

  4. ruby - 当 attr_accessor 在类方法中时会发生什么？ - 2

    所以我想到了这个，想知道当下面的一些事情完成后会发生什么。classTestdefself.abcattr_accessor:Johnendendobject=Test.newputs"beforecallingclassmethodabc:#{object.class.instance_methods(false)}"Test.abcputs"aftercallingclassmethodabc:#{object.class.instance_methods(false)}"这里我检查的是，getter和setter方法是否以这种方式创建。如果是这样，是那些实例方法或类方法。首先我创

  5. ruby - 在 Ruby 中，垂直线是什么？ - 2

    1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru

  6. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  7. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - 可以正常中断的来自 Rake 的长时间运行的 shell 命令？ - 2

    在几个项目中，我希望有一个类似rakeserver的rake任务，它将通过任何需要的方式开始为该应用程序提供服务。这是一个示例:task:serverdo%x{bundleexecrackup-p1234}end这行得通，但是当我准备停止它时，按Ctrl+c并没有正常关闭；它中断了Rake任务本身，它说rakeaborted!并给出堆栈跟踪。在某些情况下，我必须执行Ctrl+c两次。我可能可以用Signal.trap写一些东西来更优雅地中断它。有没有更简单的方法？ 最佳答案 trap('SIGINT'){puts"Yourmessa

  9. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  10. ruby - 按数字(从大到大)然后按字母(字母顺序)对对象集合进行排序 - 2

    我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合，其中每个对象都有一个“名称”属性，以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同，按类型分割(金>银>铜，即2金>1金+1银)3.如果奖牌和类型相同，则按字母顺序子排序我正在用ruby​​做这件事，但我想语言并不重要。我确实找到了一个解决方案，但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此，如果他们有2个金牌和1个银牌，加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的，因此列表按降序排

随机推荐