logo标签列表

jQuery UI可排序占位符与Bootstrap行

javascriptjquerycsstwitter-bootstrapjquery-ui
11

我正在尝试使用jQuery UI和Bootstrap行/面板创建可拖动的面板集。 我已经得到了基本工作，我的问题是当您拖动面板时，占位符的大小不正确。它的大小是整个行而不是元素的大小。

$('.row').sortable({
 connectWith: ".panel",
 handle: ".panel-heading",
 placeholder: "panel-placeholder"
});

$('.panel').on('mousedown', function(){
 $(this).css( 'cursor', 'move' );
}).on('mouseup', function(){
 $(this).css( 'cursor', 'auto' );
});;
.panel-placeholder {
 border: 1px dotted black;
 margin: 1em 1em 1em 1em;
 height: 50px;
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container-fluid">
 <div class="row">
  <div class="col-md-3">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
  <div class="col-md-8">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
 </div>
</div>

$('.col-md-4').sortable({
    connectWith: ".col-md-4",
    handle: ".panel-heading",
    placeholder: "panel-placeholder"
});

JSFiddle: https://jsfiddle.net/zdfb3e0p/8/

有什么想法吗？

1
我在你的fiddle中编辑了CSS，将.panel-placeholder的margin属性更改为margin: 1em 1em 1em 1em;对我来说似乎工作得很好。或者你也可以使用margin: 15px 1em 1em 15px;，这样更符合bootstrap的边距和填充。 - Angelos Chalaris
3个回答
16

如果您希望占位符具有项目的确切尺寸，您可以使用Sortable start事件，在API中描述了该事件，计算并影响与拖动开始相同的样式。

一旦您从事件获取到占位符元素和处理元素的引用，您只需复制每个相关的CSS属性。

此外，为了保持网格中原始元素的位置，您必须确保对原始元素分配正确的col类。我还考虑了一些怪癖，例如默认情况下jQuery占位符被分配了内联边距，并且虚线边框也占据一些空间。

$('.row').sortable({
    connectWith: ".panel",
    handle: ".panel-heading",
    placeholder: "panel-placeholder",
    start: function(event, ui){
        var classes = ui.item.attr('class').split(/\s+/);
        for(var x=0; x<classes.length;x++){   
            if (classes[x].indexOf("col")>-1){
            ui.placeholder.addClass(classes[x]);
           }
         }

        ui.placeholder.css({      
          width: ui.item.innerWidth() - 30 + 1, //account for margin and border
          height: ui.item.innerHeight() - 15 + 1, //account for margin and border    
          padding: ui.item.css("padding"), //use original padding
          marginTop: 0 //dispose of the jQuery margin
        });       

    }
  }
});

这里是一个实际运行的Fiddle示例

我确保在所有响应模式下进行了测试

输入图片描述

你差不多成功了。你需要将代码放入fiddle中，并解决占位符的边距问题。 - dev_masta
有趣。在我进行原始设计时，我没有考虑到这一点。颁发赏金的最短时间限制为24小时，但如果没有更简单的解决方案，我会在那时将赏金授予您。 - Bravo Delta
1
你是怎么制作那个很酷的gif的？ - adamdport
1
@adamdport 一个叫做LICEcap的软件 :) - OpherV
1
我把赏金颁发给了你，因为你是第一个提出解决方案的人。我将解决方案授予Juan，因为那是我最终采用的解决方案。 - Bravo Delta
6
OpherV的解决方案可行。这里有一个简化版本，仍然可以工作，并尝试通过将CSS问题留在CSS代码中来保持关注点的分离。我已经尽量减少了js代码本身对填充/边距交互的影响。思路是相同的，我直接从.panel中获取宽度和高度，并复制.col- div上的所有类“原样”。但是，边距和填充是通过CSS设置以匹配Bootstrap的默认值。您可以在下面的片段或此处的jsfiddle中找到它。https://jsfiddle.net/zdfb3e0p/16/ 

$('.row').sortable({
     connectWith: ".panel",
     handle: ".panel-heading",
     placeholder: "panel-placeholder",
     start: function(e, ui){
         ui.placeholder.width(ui.item.find('.panel').width());
         ui.placeholder.height(ui.item.find('.panel').height());
         ui.placeholder.addClass(ui.item.attr("class"));
     }
});

$('.panel').on('mousedown', function(){
  $(this).css( 'cursor', 'move' );
}).on('mouseup', function(){
  $(this).css( 'cursor', 'auto' );
});;
.panel-placeholder {
  border: 1px dotted black;
  border-radius: 4px;
  margin: 0 15px 20px 15px;
  padding: 0;
  height: 50px;
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container-fluid">
 <div class="row">
  <div class="col-md-3">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
  <div class="col-md-8">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
 </div>
</div>

优雅！唯一的注意事项是，如果您的元素具有除Bootstrap之外的其他类，则可以过滤掉它们。 - OpherV
1
是的，公平地说，我认为你的解决方案在类管理方面更加“防弹”。但既然OP要求简化的解决方案，我想我可以贡献我的一份力量。 - Juan Ferreras
1
我授予 OpherV 积分，因为他是第一个提出可行解决方案的人。我授予您采纳的答案，因为它是我最终使用的解决方案。 - Bravo Delta
2

Bootstrap的网格系统有一个默认的 30px 的填充（每边15px）。由于您将排序与 .row 相关联，因此需要考虑这一点。将 .panel-placeholder 上的 margin 值更改为 15px 将使其符合Bootstrap的网格框架。

$('.row').sortable({
 connectWith: ".panel",
 handle: ".panel-heading",
 placeholder: "panel-placeholder"
});

$('.panel').on('mousedown', function(){
 $(this).css( 'cursor', 'move' );
}).on('mouseup', function(){
 $(this).css( 'cursor', 'auto' );
});;
.panel-placeholder {
 border: 1px dotted black;
 margin: 15px;
 height: 50px;
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container-fluid">
 <div class="row">
  <div class="col-md-3">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
  <div class="col-md-3">
   <div class="panel panel-primary">
    <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
     Panel content
    </div>
   </div>
  </div>
 </div>
</div>

https://jsfiddle.net/Lhmujrzz/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接