jQuery可排序仪表板对齐

Question

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

下面你可以看到它目前的样子。我无法在在线帮助/培训信息之间拖动销售，而在相反的一侧（创建一个完整的正方形）

HTML：

def plot_sample_top(sample, chrom):
    ax = fig.add_subplot(23, 1, subplot_coord[sample])
    ax.set_xlim([1, chrom_lengths[chrom]])
    ax.set_ylim([-10, 10])

    # scatter
    ax.scatter(df_strain['POS'], df_strain["SD"], color='black', label="< 1 SD")

CSS：

<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>

JS：

.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;
}

Answer 1

也许你正在寻找一些东西，没有什么只是错过了 ui-helper-clearfix 这里.addClass（＆＃34; ui-widget ui-widget-content ui-helper-clearfix < / strong> ui-corner-all＆＃34;）。如果我错了。在评论中问我，我会回答。 LiveFiddle

＆＃13;

＆＃13;

 

$(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');
  });
})

   

＆＃13;

   

 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;
}

＆＃13;

 <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>
 

＆＃13;

＆＃13;

＆＃13;