Question

我正在使用jQuery Sortable（http://johnny.github.io/jquery-sortable/）和Bootstrap 3。

我正在尝试对表单中的行进行排序，我想出了这段代码：

 $("#timeline_list").sortable({
     handle: 'i.fa',
     onDrop: function (item, container, _super) {
         var data = $('#timeline_list').sortable("serialize").get();
         var jsonString = JSON.stringify(data, null, ' ');

         console.log(jsonString);
         _super(item, container)
     }


 });

CSS：

.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */
    cursor: pointer;
}
.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content:"\e080";
    /* adjust as needed, taken from bootstrap.css */
}
.timeline_name {
    height: 40px!important;
    font-weight: bold;
    font-size: 19px!important;
    width: 95%!important;
}
#timeline_list .accordion-toggle:after {
    margin-top: -30px;
}
.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
#timeline_list li.placeholder {
    position: relative;
    /** More li styles **/
}
#timeline_list li.placeholder:before {
    position: absolute;
    /** Define arrowhead **/
    content:"";
    width: 0;
    height: 0;
    margin-top: -5px;
    left: -5px;
    top: -4px;
    border: 5px solid transparent;
    border-left-color: red;
    border-right: none;
}
#events ul, #events li, #timeline li {
    text-decoration: none;
    list-style-type: none!important;
}

我使用HTML标记创建了以下jsfiddle：

http://jsfiddle.net/9UA2B/

在小型设备上根据需要进行排序，但在大屏幕上不起作用 - 元素的位置计算错误。

我该如何解决？

编辑：我创建了一个更具可读性的jsfiddle来演示这个问题：

http://jsfiddle.net/9qsxZ/

Answer 1

问题是col-md-12上有li课，正在排序。删除后，一切正常......

jQuery Sortable和Bootstrap 3 - 适用于小型设备，不适用于大型设备

1 个答案: