时间戳

首页 > 解决方案 > 确定引导列内容是在左侧还是右侧（对于 Jquery 可排序）

jquery - 确定引导列内容是在左侧还是右侧（对于 Jquery 可排序）

问题描述

我创建了一个页面，用户应该在其中填写不同的信息，其中有标签向用户显示在哪里填写。内容可以是完整的（col-12）或右侧/左侧（col-6）如果内容占据了页面的一半，我希望能够将标签（蓝色圆圈）移动到与内容所在位置相同的一侧。用户将能够使用可排序的 Jquery UI 将内容移动到左侧/右侧。

见下图： 在此处输入图像描述

HTML 代码：

<div class="row">
  <div class="col-6">
    <div class="blockContent">
      <span class="grip-bar block-handle ui-sortable-handle"></span>
      <div class="block">
        <i class="icon icon-tag-warning hand left-info"></i>        
        <p>Field with tag to fill in:
          <input class="width-full width-dynamic input-line l-input-icon">
        </p>
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="blockContent">
      <span class="grip-bar block-handle ui-sortable-handle"></span>
      <div class="block">
        <i class="icon icon-tag-warning hand left-info"></i> 
        <p class="bold">Some text</p>       
        <p>Fill in this field:
          <input class="width-full width-dynamic input-line l-input-icon">
        </p>
      </div>
    </div>
  </div>
</div>

任何提示或提示如何能够确定内容的一侧以将标签设置在正确的一侧？使用 CSS 还是 Jquery？

编辑：

用户可以生成自己的 col-6 或 col-12，因此无法为内容/块可以使用的列添加“left”或“right”之类的类（据我所知）。

标签： jquerytwitter-bootstrapjquery-ui-sortable

解决方案

在 Trueextacy 的帮助下解决了这个问题，为我指明了正确的方向。

在生成 HTML 代码时，我向每一列添加了一个名为 tag-left 或 tag-right 的类，然后 sortable 上的块将检查新列的标签侧并相应地设置 CSS。

推荐阅读