Javascript 带引导行的jQuery UI可排序占位符

我正在尝试使用jQueryUI和引导行/面板创建一组可拖动的面板。我有一些基本上有效的东西，我的问题是当你拖动面板时占位符的大小不正确。它是整行的大小，而不是元素的大小

$（'.row'）。可排序({
连接到：“.panel”，
手柄：“.面板标题”，
占位符：“面板占位符”
});
$（'.panel'）.on（'mousedown'，function（）{
$（this.css（'cursor'，'move'）；
}).on（'mouseup'，function（）{
$（this.css（'cursor'，'auto'）；
});;
.panel占位符{
边框：1px点黑色；
保证金：1em 1em 1em；
高度：50px；
}

小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
引导的网格系统具有默认的
30px
填充（每侧15px）。由于您将排序绑定到
.row
，因此需要对此进行说明。将
面板占位符
上的
边距
值更改为
15px
将使其与引导的网格框架一致


$（'.row'）。可排序({
连接到：“.panel”，
手柄：“.面板标题”，
占位符：“面板占位符”
});
$（'.panel'）.on（'mousedown'，function（）{
$（this.css（'cursor'，'move'）；
}).on（'mouseup'，function（）{
$（this.css（'cursor'，'auto'）；
});;
.panel占位符{
边框：1px点黑色；
利润率：15px；
高度：50px；
}

小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
如果希望占位符具有项目的精确尺寸，可以使用可排序的
start
事件来计算和影响与拖动开始相同的样式

一旦从事件中引用了占位符元素和句柄元素，就可以复制每个相关的CSS属性

此外，为了将网格中的定位保持为原始元素，必须确保从原始元素中指定适当的
col
类。我还解释了一些怪癖，比如默认情况下jQuery占位符被分配了一个内联边距，虚线边框也占用了一些空间

$('.row').sortable({
    connectWith: ".panel",
    handle: ".panel-heading",
    placeholder: "panel-placeholder",
    start: function(event, ui){
        var classes = ui.item.attr('class').split(/\s+/);
        for(var x=0; x<classes.length;x++){   
            if (classes[x].indexOf("col")>-1){
            ui.placeholder.addClass(classes[x]);
           }
         }

        ui.placeholder.css({      
          width: ui.item.innerWidth() - 30 + 1, //account for margin and border
          height: ui.item.innerHeight() - 15 + 1, //account for margin and border    
          padding: ui.item.css("padding"), //use original padding
          marginTop: 0 //dispose of the jQuery margin
        });       

    }
  }
});

$（'.row'）。可排序({
连接到：“.panel”，
手柄：“.面板标题”，
占位符：“面板占位符”，
开始：功能（事件、用户界面）{
var classes=ui.item.attr（'class'）.split（/\s+/）；
对于（变量x=0；x-1）{
ui.placeholder.addClass（类[x]）；
}
}
css（{
宽度：ui.item.innerWidth（）-30+1，//说明边距和边框
高度：ui.item.innerHeight（）-15+1，//说明边距和边框
填充：ui.item.css（“填充”），//使用原始填充
marginTop:0//处理jQuery页边距
});       
}
}
});

这里有一个

我确保在所有响应模式下都进行了测试

奥弗夫解决方案有效。然而，这里有一个简化的版本，它仍然可以工作，并试图通过将CSS问题留在CSS代码中来保持关注点的分离。
我已经尽量减少js代码本身的填充/空白交互

想法是一样的，我直接从
.panel
中获得
宽度和
高度，我照样复制
col-
div上的所有类。但是边距和填充是通过CSS设置的，以匹配引导的默认值

您可以在下面的代码片段中找到它，或者在JSFIDLE上找到它


$（'.row'）。可排序({
连接到：“.panel”，
手柄：“.面板标题”，
占位符：“面板占位符”，
开始：功能（e、ui）{
ui.placeholder.width（ui.item.find（'.panel'）.width（））；
ui.placeholder.height（ui.item.find（'.panel'）.height（））；
ui.placeholder.addClass（ui.item.attr（“类”）；
}
});
$（'.panel'）.on（'mousedown'，function（）{
$（this.css（'cursor'，'move'）；
}).on（'mouseup'，function（）{
$（this.css（'cursor'，'auto'）；
});;
.panel占位符{
边框：1px点黑色；
边界半径：4px；
利润率：0 15px 20px 15px；
填充：0；
高度：50px；
}

小组标题
面板内容
小组标题
面板内容
小组标题
面板内容
我编辑了小提琴中的CSS，将
面板占位符的
边距
属性更改为
边距：1em 1em 1em对我来说似乎已经足够好了。或者您可以使用
边距：15px 1em 1em 15px
这更符合bootstrap的边距和填充。您就快到了。您需要将代码放在小提琴中，并计算占位符的边距。当我做我的原创设计时，我没有想到这一点。奖励的最短时限是24小时，但如果没有更简单的解决方案，我会奖励你。你是如何制作neato gif的？@adamdport一个名为LICEcap的软件：）我奖励你，因为你是第一个提出解决方案的人。我把这个解决方案授予了胡安，因为这就是我最终使用的解决方案。优雅！唯一的警告是，如果你的元素除了Bootstrap之外还有其他类，但我想你可以过滤掉这些OutyeAh，公平地说，我认为你的解决方案更具“防弹性”，特别是在班级管理上。但由于欧佩斯要求简化的解决方案，我认为我可以用自己的一粒沙子做出贡献。我给了欧佩斯分数，因为他是第一个提出可行方案的人