草庐IT

jQuery UI Sortable 和 Bootstrap 3 流体网格闪烁和中断

coder 2023-08-12 原文

我有一个基于 Bootstrap 3 的基本 3 x 3 网格布局。我需要它是流畅的，因此我省略了“容器”类。我需要使用 jquery ui 可排序功能对行内的列进行排序。

一切正常，但每行的最后一列在拖动时表现异常。点击最后一列中的任何一列，设计就会中断。

我已经尝试过将占位符边距设置为 0 的解决方案，但我似乎无法使其工作。

任何帮助将不胜感激!谢谢!

JSFiddle 

<div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>
    <div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>
    <div class = 'row'>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
        <div class = 'col-xs-4'>
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
              dolor, in sagittis nisi.</p>
            <p><a href="#" class="btn">View details »</a></p>
        </div>
    </div>



<script>
$('.row').sortable({
  connectWith: '.row',
  placeholder: 'placeholder'
});
</script>
<style>
.placeholder {margin-left: 0 !important; border: 1px solid #ccc}
</style>

最佳答案

尝试使用以下设置初始化可排序小部件:

$('.row').sortable({
    helper: 'clone',
    placeholder: 'col-xs-4'
});

http://jsfiddle.net/0bzwc61d/1/

关于jQuery UI Sortable 和 Bootstrap 3 流体网格闪烁和中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19632881/

BootstrapSortablegtltametjqueryhtmlcssjquery-uitwitter-bootstrap-3

有关jQuery UI Sortable 和 Bootstrap 3 流体网格闪烁和中断的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  3. ruby-on-rails - 你能为 Ruby on Rails 推荐好的数据网格类/gem 吗？ - 2

    您能为RubyonRails推荐好的数据网格类/gem吗？喜欢http://code.google.com/p/zend-framework-datagrid/采埃孚 最佳答案 你也可以试试datagridgem。这不仅关注带有列的网格，还关注过滤器。classSimpleReportincludeDatagridscopedoUser.includes(:group)endfilter(:category,:enum,:select=>["first","second"])filter(:disabled,:eboolean)fi

  4. ruby-on-rails - 网格与Rails？ - 2

    网格支撑排序数据。搜索全选/无轨道上有网格吗？ 最佳答案 为铁路电网提供丰富的信息。请参阅此链接。http://www.2dconcept.com/jquery-grid-rails-plugin 关于ruby-on-rails-网格与Rails？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/5100498/

  5. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON

  6. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  7. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  8. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo

  9. ruby - 使用指南针安装 bootstrap sass - 2

    我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass，但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r

  10. ruby-on-rails - Bootstrap 的 ruby gem 有什么区别？ - 2

    gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好？ 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用，不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可，直到它在2014年被弃用并被下面的bootstrap-sass取代b

随机推荐