jquery - Jquery ui tabs:sortable weired element heights

Question

I am trying to create a simple ui tabs from basic structure.

I have four tabs

1. Apple
2. Orange
3. Mango
4. More

When I drag Orange and More their height increases and when dropped goes back to normal. This does not happen with Apple and Mango elements.

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

为需要的人发布最终代码..

更改为<span>ui 按钮有效..

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Apple</a> 
            <button>close</button>
        </li>
        <li>
            <a href="#tabs-2">Orange</a> 
            <button>close</button>
        </li>
        <li>
            <a href="#tabs-3">Mango</a> 
            <button>close</button>
        </li>
        <li>
            <a href="#tabs-4">More</a> 
            <button>close</button>
        </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：

body { font-size: 62.5%; }

#tabs li button {
 margin-top:8%;
    margin-right:2px;
 font-size: 55%;

 }

JS：

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");
});

$("button").button({
    icons: {
        primary: "ui-icon-close"
    },
    text: false
});

Answer 2

好的，我的建议是一种 hack，但由于这是一个非常直接的问题，我们手中的东西不多，这个想法是设置#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

Answer 3

我遇到了这个问题，我认为这是最好的解决方法。

• 这里的问题是，当你持有并排序 li 元素时，jquery ui 会为元素添加自己的“排序样式”。当您将 li 元素放置到位时，它会恢复为原始样式。
• 排序样式向下舍入宽度 css 属性，因此如果您的宽度为 70.35 像素，则将其舍入为 70 像素，任何元素或文本都会换行，因为宽度会缩小。

修复：排序开始时，添加额外的 1px 宽度。当排序结束时，它会自动恢复到原来的宽度。参见示例：

$(function() {
    var tabs = $( "#tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
      axis: "x",
      start: function(event, ui) {
        ui.helper.width(ui.helper.width() + 1);
      }
    });
  });