如何在jquery中修复可排序网格中的div答案

【问题标题】：How to fix a div in sortable grid in jquery如何在jquery中修复可排序网格中的div
【发布时间】：2015-09-11 22:26:51
【问题描述】：

在上图中，所有的六边形都是可移动的，除了蓝色的中心六边形。我想将蓝色六边形固定在中心，而任何其他六边形都可以移动到任何地方。但我不明白如何做到这一点。为了更清楚，我想将蓝色六边形固定在第 7 位。

我的代码是

$("#sortable").sortable({
    cursor: 'move',
    items: 'div.sort',
}).disableSelection();

HTML

 <div class="col-sm-12 margin-top-100 margin-left-100" id="sortable">
    <div id="c_1" class="hexagon hexagon2 sort">
        <div class="hexagon-in1">
           <div class="hexagon-in2">
              <div class="inner inner-left text-center"><i class="fa fa-eye"> </i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
              </div>
           </div>
         </div>
     <div id="c_2"  class="hexagon hexagon2 sort">
       <div class="hexagon-in1">
         <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
    </div>
  </div>
   <div id="c_3"  class="hexagon hexagon2 sort">
    <div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
</div>
</div>
<div id="c_4"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
   </div>
</div>

<div id="c_5"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
 </div>
<div id="c_6"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
  </div>
 </div>
<div id="c_7"  class="hexagon hexagon2" >
<div class="hexagon-in1">
    <div class="hexagon-in2" id="kinglinkr">
        <div class="inner inner-left text-center"><i class="fa fa-trash"></i></div><div class="inner inner-right text-center"><i class="fa fa-thumbs-up"></i></div>
    </div>
 </div>
 </div>
 <div id="c_8"  class="hexagon hexagon2 sort">
  <div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
</div>
</div>
<div id="c_9"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
</div>
</div>

<div id="c_10"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
</div>
<div id="c_11"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
  </div>
 </div>
 <div id="c_12"  class="hexagon hexagon2 sort">
 <div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
 </div>
 <div id="c_13"  class="hexagon hexagon2 sort">
 <div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
 </div>

 <div id="c_14"  class="hexagon hexagon2 sort">
 <div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
 </div>
<div id="c_15"  class="hexagon hexagon2 sort">
<div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
 </div>
 <div id="c_16"  class="hexagon hexagon2 sort">
 <div class="hexagon-in1">
    <div class="hexagon-in2">
        <div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
    </div>
 </div>
 </div>

 </div>

请帮助我。您的帮助将不胜感激。谢谢。

我在小提琴上添加了这个，但不知道为什么拖动不起作用

https://jsfiddle.net/vinie23/2jsqmgw2/

【问题讨论】：

可以分享一下jsfiddle版本吗？
我更新了问题。

标签： javascript jquery html css jquery-ui

【解决方案1】：

为蓝色六边形提供额外的类并使用items 喜欢：

$(".sortable").sortable({
      items: "li:not(.unsortable)" //unsortable extra class for blue
    });

【讨论】：

通过使用您的代码蓝色六边形将无法排序，但是当我拖动第 8 个位置的六边形并将其放在第 6 个位置时，蓝色六边形位置也将变为第 8 个。我希望它仍然在第 7 位。
请参阅：stackoverflow.com/questions/4299241/…

【解决方案2】：

感谢您的回复。我使用以下代码解决了它

var fixed=function(event,ui) {
    var thisindex = $(ui.helper).index(fixed);         
    var fixed = $("#c_7");           
    var index = $("#sortable .hexagon").index(fixed);
    var targetindex = 7;
    if(index !== targetindex) {         
        if(index > targetindex ) {
            fixed.prev().insertAfter(fixed); //move it up by one position
        } else if(index==(targetindex-1) && thisindex>targetindex) {
            //don't move it at all
        } else {
            fixed.next().insertBefore(fixed); //move it down by one position
        }
    } else if(index==targetindex && thisindex>targetindex) {
        fixed.prev().insertAfter(fixed); //move it up by one position
    }       
}

    var fixd=function(e, tr) {
    var sorted_id=tr.item.get(0).id;
    get_sort();
    };

    $("#sortable").sortable({
    cursor: 'move',
    items: 'div.sort',
    cancel:'#c_7',
    change: fixed,
    stop:fixd
    }).disableSelection();

参考Forcing an item to remain in place in a jQuery UI Sortable list

【讨论】：

【解决方案3】：

有一个更好的方法来解决这个问题。您需要使用网格而不是列表，然后您可以通过使用 CSS 声明元素的排列位置来固定元素的位置：

.fixed-element {
   grid-column-start: 1;
   grid-column-end: 1;
   grid-row-start: 1;
   grid-row-end: 1;
}

确保不要忘记禁用固定元素的可排序选项：

$('.fixed-element').sortable({ disabled: false });

【讨论】：