jQuery 可排序仪表板对齐

Question

我正在尝试使用 jQuery sortable 创建一个仪表板(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');
  });
} );

Answer 1

也许你正在寻找这个东西，没有什么只是错过了这里的 ui-helper-clearfix .addClass("ui-widget ui-widget-content ui-helper-clearfix ui Angular 所有”)。如果我错了。在评论中问我，我会回答。 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>