0
を見ていません。ただし、ポートレット・ボックスには固定幅があるため、表示されません。したがって、1つのポートレットに大きなフォームがあり、側面に要素がある場合、それらは重複しています。側ではなく、私のフォームの一番上にあるべきものを黒矢印でドラッグ可能とソート可能なjqueryのは、私は、この動作を再現しようとしている良い
：私はスクリーンショット（私は公共することはできませんいくつかの部分をカバー）を取り付けます。赤い矢印を使用すると、フォームの周りにあるポートレットの周囲の境界線（または何かが存在するか、存在しないか）が表示されます。
私が欲しいものを達成するためには何が必要ですか？私は
$(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>
\t <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
\t <script src="./JS/js.js"></script>
\t <title> </title>
\t
\t <!-- TESTING -->
\t <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
\t <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
\t <link rel="stylesheet" href="./CSS/dragtest.css">
\t <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>
\t <fieldset>
\t <legend>Upload</legend>
\t \t <label for="usuari">User: </label>
\t \t <select name="usuari" id="usuari">
\t \t <option value='1'>Samy</option><option value='2'>Boji</option><option value='3'>Ferrer</option><option value='4'>Pajaru</option> \t \t </select>
\t \t <div>
\t \t \t <label for="fet"> Fet: </label>
\t \t \t <select name="fet" id="fet">
\t \t \t <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> \t \t \t </select>
\t \t </div>
\t \t
\t \t <div>
\t \t \t <label for="data"> Data: </label>
\t \t \t <input id="data" name="data" type="date" value="2016-06-28">
\t \t </div>
\t \t <div>
\t \t \t <label for="horaRebut"> Hora rebut: </label>
\t \t \t <input type="time" value="10:24" name="horaRebut" id="horaRebut">
\t \t </div>
\t \t <div>
\t \t \t <label for="horaFet"> Hora posat: </label>
\t \t \t <input type="time" value="10:24" name="horaFet" id="horaFet">
\t \t </div>
<div>
\t \t <label for="comment"> Comentaris extra </label>
\t \t <textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"> </textarea>
\t \t \t </div>
\t \t \t
\t \t \t <div>
\t \t \t \t <button name="uploadp" type="submit">Donar pick d'alta</button>
\t \t \t </div>
\t </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>
はい！あなたが正しいです。 .Columnは固定された幅を持ち、それは問題でした:)ありがとう。最後に、このコードを170pxからautoに変更しました：.column { width：auto; float：left; パディングボトム：100px; }私はCSSでかなり悪いです。余分なクラスが追加されて少し複雑になると、私は完全に失われてしまいます。再度、感謝します –