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

【问题标题】：Determine if bootstrap column content is on left or right side (For Jquery sortable)确定引导列内容是在左侧还是右侧（对于 Jquery 可排序）
【发布时间】：2019-11-16 06:25:03
【问题描述】：

我创建了一个页面，用户应该在其中填写不同的信息，其中有标签显示用户在哪里填写。内容可以用（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”这样的类（据我所知)。

【问题讨论】：

你的问题让我有点困惑。也许您正在寻找抵消？例如.col-md-offset-2?
我不认为它是我所追求的偏移量，我只使用 col-6，并且需要知道该列是在右侧还是左侧。由于用户可能将 col-6 中的内容从左向右移动或相反，因此当用户移动内容时，圆圈/标签应移动到纸张的“右侧”。
啊，我明白你在说什么。您可以做的是在用户拖动列时创建一个事件，以运行您自己的函数，并将类或属性附加到列，以便您知道哪个是哪个。我对 jquery UI 不是很熟悉，但我确信可能有 $(#ele).on('drag') 或类似的东西。
我只是想用我无法附加的信息来编辑我的问题，例如“左”或“右”到类，因为用户可以生成 col-6 和 col-12 添加下面的新内容。还有其他可能的解决方案吗？否则我将不得不重新考虑我的代码，因为这是迄今为止尝试你所说的最好的解决方案
我的意思是，它不必是一个类，你可以在那里抛出任何属性，假设有一些信息来自“on drag”的事件参数，你可以只需在元素上抛出任何旧属性，以便您知道哪个是哪个。如果你能给我一些 javascript 的小提琴，我可以提供更多帮助。

标签： jquery twitter-bootstrap jquery-ui-sortable

【解决方案1】：

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

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

【讨论】：