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

标签 javascript jquery css jquery-ui portlet

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

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

enter image description here

带有黑色箭头的内容应该在我的表单的侧面而不是顶部。带有红色箭头的 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>

最佳答案

如果您将 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>

关于javascript - 可拖动和可排序的 Jquery 看起来不太好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38070933/

上一篇：javascript - 无论子元素如何，强制 div 高度为 0

下一篇：css - 如何在 Bootstrap 导航标题下放置传单 map ？

相关文章：

jquery - 根据背景更改图像颜色

html - 如何在我的元素中只导入一次 JS 和 CSS 文件？

javascript - setInterval() 有什么选项吗？

javascript - 如何提交表单并将一些额外参数传递给 $.getJSON 回调方法？

javascript - jQuery superfish 在使用 box-sizing 属性时添加隐藏在 ul 标签上的溢出？

javascript - 根据其位置更改导航栏颜色。颜色不变

html - 调整窗口大小时CSS float div重叠或不向下移动

html - 如何在表格中放置占位符？

javascript - 单击时使用javascript将一些文本更改为输入字段

javascript - ReactJS - 在不同组件中使用相同的钩子(Hook)

©2024 IT工具网  联系我们