jQuery 可排序仪表板对齐答案

【问题标题】：jQuery Sortable Dashboard AlignmentjQuery 可排序仪表板对齐
【发布时间】：2016-10-05 22:09:29
【问题描述】：

我正在尝试使用可排序的 jQuery 创建仪表板（xbox 一种样式）。我有几个不同大小的 portlet，我可以四处移动，但我似乎无法将一些 portlet 拖到正确的位置，我不知道为什么。

您可以在下面看到它当前的外观。我无法在在线帮助/培训信息和对面的相同信息之间拖动销售（以创建一个完整的正方形）

HTML：

<div class="sortable">
                <div class="portlet span-1">
                    <div class="portlet-header">Sales</div>
                    <div class="portlet-content"></div>
                </div>

                <div class="portlet span-1">
                    <div class="portlet-header">Online Help</div>
                    <div class=""></div>
                </div>

                <div class="portlet span-3">
                    <div class="portlet-header">Xpress Mail</div>
                    <div class="portlet-content"></div>
                </div>

                <div class="portlet span-1">
                    <div class="portlet-header">Online Help</div>
                    <div class=""></div>
                </div>

                <div class="portlet span-1">
                    <div class="portlet-header">Online Help</div>
                    <div class=""></div>
                </div>

                <div class="portlet span-1">
                    <div class="portlet-header">Training Info</div>
                    <div class="portlet-content"></div>
                </div>

                <div class="portlet span-2">
                    <div class="portlet-header">My Fogbugz</div>
                    <div class="portlet-content"></div>
                </div>

                <div class="portlet span-1">
                    <div class="portlet-header">User Group</div>
                    <div class="portlet-content"></div>
                </div>

            </div>

CSS：

.sortable {
width: 100%;
height: 700px;
font-size: 0;
border-radius: 5px;
}

.portlet {
font: 12px/1.3 sans-serif;
margin: 3px;
padding: 1px;
display: inline-block;
vertical-align: top;
height: 200px;
background-color:deepskyblue;
}

.portlet.span-1 { width: 300px; }
.portlet.span-2 { width: 600px; }
.portlet.span-3 { width: 600px; height:400px}

.portlet-header {
margin: 1px;
padding: 1px 0 2px 3px;
}

.portlet-header .ui-icon {
float: right;
}

.portlet-content {
padding: 4px;
}

.portlet-minimized {
height: auto;
}

.portlet-minimized .portlet-content {
display: none;
}

.ui-sortable-placeholder {
border: 1px dotted black;
visibility: visible !important;
}

JS：

$( function() {
  $('.sortable').sortable({ connectWith: '.sortable' }).disableSelection();

  $('.portlet')
      .addClass('ui-widget ui-widget-content ui-corner-all')
      .find('.portlet-header')
          .addClass('ui-widget-header ui-corner-all')
          .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
      .end()
      .find('.portlet-content')
          .text('');

  $('.portlet-header .ui-icon').on('click', function () {
      $(this).toggleClass('ui-icon-minusthick ui-icon-plusthick');
      $(this).closest('.portlet').toggleClass('portlet-minimized');
  });
} );

【问题讨论】：

您应该查看 Gridster，这是一个 JS 库，可以帮助您做到这一点：dsmorse.github.io/gridster.js
谢谢，我去看看
@user3218507 你是不是看起来像是在窗口上到处拖动框并将其放置在你想要的位置？？

标签： jquery html css jquery-ui jquery-ui-sortable

【解决方案1】：

也许你正在寻找这样的东西，没有错过这里的 ui-helper-clearfix .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")。如果我错了。在评论中问我，我会回答。 LiveFiddle

 

$(function() {
  $('.sortable').sortable({
    connectWith: '.sortable'
  }).disableSelection();

  $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".portlet-header")
    .addClass("ui-widget-header ui-corner-all")
    .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
    .end()
    .find(".portlet-content").text(' ');
  $('.portlet-header .ui-icon').on('click', function() {
    $(this).toggleClass('ui-icon-minusthick ui-icon-plusthick');
    $(this).closest('.portlet').toggleClass('portlet-minimized');
  });
})

   

 body{
     background:#bbb;
     background-repeat:no-repeat;
      }
    .sortable {
  width: 100%;
  height: 700px;
  font-size: 0;
  border-radius: 5px;
}

.portlet {
  font: 12px/1.3 sans-serif;
  margin: 3px;
  padding: 1px;
  display: inline-block;
  vertical-align: top;
  height: 200px;
  background-color: deepskyblue;
}

.portlet.span-1 {
  width: 300px;
}

.portlet.span-2 {
  width: 600px;
}

.portlet.span-3 {
  width: 600px;
  height: 400px
}

.portlet-header {
  margin: 1px;
  padding: 1px 0 2px 3px;
}

.portlet-header .ui-icon {
  float: right;
}

.portlet-content {
  padding: 4px;
}

.portlet-minimized {
  height: auto;
}

.portlet-minimized .portlet-content {
  display: none;
}

.ui-sortable-placeholder {
  border: 1px dotted black;
  visibility: visible !important;
}

 <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>
<div class="sortable">
  <div class="portlet span-1">
<div class="portlet-header">Sales</div>
<div class="portlet-content"></div>
  </div>

  <div class="portlet span-1">
<div class="portlet-header">Online Help</div>
<div class=""></div>
  </div>

  <div class="portlet span-3">
<div class="portlet-header">Xpress Mail</div>
<div class="portlet-content"></div>
  </div>

  <div class="portlet span-1">
<div class="portlet-header">Online Help</div>
<div class=""></div>
  </div>

  <div class="portlet span-1">
<div class="portlet-header">Online Help</div>
<div class=""></div>
  </div>

  <div class="portlet span-1">
<div class="portlet-header">Training Info</div>
<div class="portlet-content"></div>
  </div>

  <div class="portlet span-2">
<div class="portlet-header">My Fogbugz</div>
<div class="portlet-content"></div>
  </div>

  <div class="portlet span-1">
<div class="portlet-header">User Group</div>
<div class="portlet-content"></div>
  </div>

</div>

    </body>

【讨论】：