可拖动和可排序 Jquery 看起来不太好

Question

我正在尝试复制此行为：https://jqueryui.com/sortable/#portlets

我已经在我的 HTML 站点中包含了必填字段，并且效果很好。但是，它看起来不太好，因为 portlet 框具有固定宽度。因此，如果我在一个 portlet 中有一个大表单，并且旁边有元素，它们就会重叠。我附上截图（我覆盖了一些不能public的部分）：

带有黑色箭头的内容应该在我的表单的侧面而不是顶部。带有红色箭头的 portlet 周围的边框应该围绕表单（或其他任何内容，或者根本不存在）。

我需要做什么才能达到我想要的效果？我附上相关代码（我把表格简化了一点）

 $(function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
    $( ".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 portlet-toggle'></span>");
 
    $( ".portlet-toggle" ).click(function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  });

 body {
    min-width: 520px;
  }
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <script src="./JS/js.js"></script>
 <title>  </title>
 
 <!-- TESTING -->
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="./CSS/dragtest.css">
 <script src="./JS/dragtest.js"></script>
</head>

<body>
<h2> cambiar </h2>
<div class="column">
 
  <div class="portlet">
      <div class="portlet-header">New pick</div>
    <div class="portlet-content">
<form>
 <fieldset>
 <legend>Upload</legend>

  <label for="usuari">User: </label>
  <select name="usuari" id="usuari">
  <option value='1'>Samy</option><option value='2'>Boji</option><option value='3'>Ferrer</option><option value='4'>Pajaru</option>  </select>

  <div>
   <label for="fet"> Fet: </label>
   <select name="fet" id="fet">
   <option value='1'>Si</option><option value='2'>No - Quota caiguda</option><option value='3'>No - Desaparegut del mercat</option><option value='4'>No - Línea moguda</option>   </select>
  </div>
  
  <div>
   <label for="data"> Data: </label>
   <input id="data" name="data" type="date" value="2016-06-28">
  </div>

  <div>
   <label for="horaRebut"> Hora rebut: </label>
   <input type="time" value="10:24" name="horaRebut" id="horaRebut">
  </div>

  <div>
   <label for="horaFet"> Hora posat: </label>
   <input type="time" value="10:24" name="horaFet" id="horaFet">
  </div>



        <div>
  <label for="comment"> Comentaris extra </label>
  <textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"> </textarea>
   </div>
   
   <div>
    <button name="uploadp" type="submit">Donar pick d'alta</button>
   </div>
 </fieldset>
</form>
</div>
  </div>
  </div>
  
  
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>

Answer 1

如果您将 width:auto 添加到具有表单的东西中，看起来问题已解决（全屏查看演示）

$(function() {
  $(".column").sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"
  });

  $(".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 portlet-toggle'></span>");

  $(".portlet-toggle").click(function() {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
  });
});

body {
  min-width: 520px;
}
.column {
  width: 170px;
  float: left;
  padding-bottom: 100px;
}
.column.column-form {
  width: auto;
}
.portlet {
  margin: 0 1em 1em 0;
  padding: 0.3em;
}
.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
}
.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}
.portlet-content {
  padding: 0.4em;
}
.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="./JS/js.js"></script>
  <title></title>

  <!-- TESTING -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="./CSS/dragtest.css">
  <script src="./JS/dragtest.js"></script>
</head>

<body>
  <h2> cambiar </h2>
  <div class="column column-form">

    <div class="portlet">
      <div class="portlet-header">New pick</div>
      <div class="portlet-content">
        <form>
          <fieldset>
            <legend>Upload</legend>

            <label for="usuari">User:</label>
            <select name="usuari" id="usuari">
              <option value='1'>Samy</option>
              <option value='2'>Boji</option>
              <option value='3'>Ferrer</option>
              <option value='4'>Pajaru</option>
            </select>

            <div>
              <label for="fet">Fet:</label>
              <select name="fet" id="fet">
                <option value='1'>Si</option>
                <option value='2'>No - Quota caiguda</option>
                <option value='3'>No - Desaparegut del mercat</option>
                <option value='4'>No - Línea moguda</option>
              </select>
            </div>

            <div>
              <label for="data">Data:</label>
              <input id="data" name="data" type="date" value="2016-06-28">
            </div>

            <div>
              <label for="horaRebut">Hora rebut:</label>
              <input type="time" value="10:24" name="horaRebut" id="horaRebut">
            </div>

            <div>
              <label for="horaFet">Hora posat:</label>
              <input type="time" value="10:24" name="horaFet" id="horaFet">
            </div>



            <div>
              <label for="comment">Comentaris extra</label>
              <textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"></textarea>
            </div>

            <div>
              <button name="uploadp" type="submit">Donar pick d'alta</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>


  <div class="column">

    <div class="portlet">
      <div class="portlet-header">Feeds</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div class="portlet">
      <div class="portlet-header">News</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

  <div class="column">

    <div class="portlet">
      <div class="portlet-header">Shopping</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

  <div class="column">

    <div class="portlet">
      <div class="portlet-header">Links</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

    <div class="portlet">
      <div class="portlet-header">Images</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

  </div>

可拖动和可排序 Jquery 看起来不太好

Draggable and sortable Jquery not looking good

javascript

css

jquery

portlet

jquery-ui