Jquery 用户界面选项卡 :sortable weired element heights

Question

我正在尝试从基本结构创建一个简单的 ui 选项卡。

我有四个标签

1. 苹果
2. 橙色
3. 芒果
4. 更多

当我拖动 Orange 和 More 时，它们的高度会增加，当放下时会恢复正常。 Apple 和 Mango 元素不会发生这种情况。

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Apple</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
        <li>
            <a href="#tabs-2">Orange</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
        <li>
            <a href="#tabs-3">Mango</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
        <li>
            <a href="#tabs-4">More</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
    </ul>
    <div id="tabs-1"><p>Apple</p></div>
    <div id="tabs-2"><p>Orange</p></div>
    <div id="tabs-3"><p>Mango</p></div>
    <div id="tabs-4"><p>More</p></div>    
</div>

CSS:

 #tabs li .ui-icon-close {
     float: left;
     margin: 0.4em 0.2em 0 0;
     cursor: pointer;
 }

JS:JSFIDDLE

var tabs = $("#tabs").tabs();
// Make Tabs Sortable
tabs.find(".ui-tabs-nav").sortable({
    axis: "x",
    stop: function () {
        tabs.tabs("refresh");
    }
});
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
    tabs.tabs("refresh");
});

Answer 1

好吧，我的建议是一种 hack，但由于这是一个非常简单的问题，我们手中的东西不多，我的想法是设置 min-width #tabs 内的 >li 元素大于当前宽度，最多约 3px。

原因:当有人尝试拖动元素时，li 元素的宽度由 js 设置，最终导致 UI 失真。

黑客:使用这个脚本:

$(document).ready(function(){
 $('#tabs li').each(function(){
    var wd = (parseInt($(this).css('width').replace('px',''))+3)+'px';
    $(this).css('min-width',wd);
 });
});

jsfiddle