0
Ich versuche, dieses Verhalten zu reproduzieren: https://jqueryui.com/sortable/#portletsZiehbare und sortierbar JQuery sieht nicht gut aus
Ich habe die erforderlichen Felder in meiner HTML-Seite enthalten und es gut funktioniert. Es sieht jedoch nicht so gut aus, da die Portlet-Box eine feste Breite hat. Wenn ich also ein großes Formular in einem Portlet habe und Elemente auf der Seite sind, überlappen sie sich. Ich lege einen Screenshot (ich einige Teile abdecken, die nicht öffentlich sein können):
mit schwarzen Pfeilen, was auf der Seite sein sollte und nicht auf meiner Form. Mit roten Pfeilen die umgebende Umrandung um das Portlet herum, die um das Formular herum sein sollte (oder was auch immer oder überhaupt nicht existiert).
Was muss ich tun, um zu erreichen, was ich will? Ich lege eine entsprechenden Code (Ich habe die Form ein wenig vereinfachen)
$(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>
Ja! Du hast recht. .Column hatte eine feste Breite und das war ein Problem :) Danke. Am Ende habe ich diesen Code einfach von 170px in auto geändert: .column { width: auto; Schwimmer: links; padding-unten: 100px; } Ich bin ziemlich schlecht mit CSS, wenn es ein bisschen komplizierter wird mit zusätzlichen Klassen hinzugefügt usw. Ich bin völlig verloren. Danke noch einmal –