Question

我使用shapeshift进行拖动和放大drop options，其中一个容器隐藏在bootstrap选项卡中。 Shapeshift在那里被初始化，但是直到第一次拖动项目时才将项目设置到位置。

JS解决了这个错误：https://jsfiddle.net/owm6wo0r/

正如您在JSFiddle中看到的那样，当您点击＆＃34; Tab 2＆＃34;所有物品都在一个在另一个上。当你试图拖动它们时，它们会设置位置。

以下是插件的文档：https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation

我尝试了事件＆＃34; ss-rearrange＆＃34;单击选项卡，但它没有工作......任何想法如何解决它？

HTML：

<div class="dragdrop">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<ul class="nav-tabs nav" role="tablist">
  <li class="active">
    <a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">Tab 1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab" role="tab" aria-controls="tab2">Tab 2</a>
  </li>
 </ul>

<div class="tab-content">
  <div id="tab1" role="tabpanel" class="tab-pane active">
    <p> Nothing there </p>
  </div>
<div id="tab2" role="tabpanel" class="tab-pane">
    <div class="dragshared">
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
    </div>
  </div>
 </div>

JS：

$('.nav-tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

$('.dragdrop').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
dragClone: false,
enableDrag: true,
enableCrossDrop: true
});

$('.dragshared').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
deleteClone: true,
dragClone: true,
enableCrossDrop: false
});

Answer 1

我的最终解决方案是设置/\Q$install_base\E/而不是cpanm App::cpanminus上的开始引导选项卡，并且只有在shapeshift初始化后再次切换为display none / block，因为可见性不起作用（停用的标签显示一秒钟。）

我相信有办法让它变得聪明。

CSS

visibility: hidden/visible

JS

display: block/none

当位于引导标签内时，Shapeshift不会设置位置

1 个答案: