JQuery ui 可调整大小未达到最大宽度

Question

我目前正在开发一个网站，该网站能够动态地将复选框添加到无序列表中。 将“li”附加到该列表时，应该能够在“ul”容器内拖动“li”并调整其大小。我使用 jquery 的可拖动功能拖动“li”没有任何问题，但是我目前遇到了其可调整大小功能的问题。

虽然“li”最初可以调整大小，但一旦将可拖动的 div (“ul”) 容器在屏幕上进一步向右拖动，“li”在再次调整大小时就会遇到无形的墙壁。 这个问题可以通过在外部 div 附加 'li' 来解决，尽管这在无序列表语法中显然是错误的。

请问有人可以帮忙吗？

此问题的简化示例 - http://jsfiddle.net/DomH00/5pfN6/5/

这是我的 JavaScript:

var numberOfCheckboxes = 1;

$('#dragWrapper1').draggable({
    grid: [10, 10],
    scroll: false,
    containment: ".tab_container"
});

$('#addChoice').click(function () {

var selectedDragObject = $('#dragWrapper1');    
var selectedDragObjectUl = selectedDragObject.get(0).firstChild;      

if ($("#choiceValue").val()) {

    var newSpan = $("<span />", {
       'class': "checkbox_span"
    });

    var newCheckbox = $("<input />", {
        name: "checkbox_response",
        id: "checkbox_response_" + numberOfCheckboxes,
        type: "checkbox",
        value: $("#choiceValue").val()
    });

    var labelForCheckbox = $("<label />", {
        "for": $(newCheckbox).id,
        text: $("#choiceValue").val(),
        "class": "checkbox_label",
        "id": "checkbox_label_" + numberOfCheckboxes
    });

    var newLi = $("<li>",
        {
            "class": "ui-state-default",
            "id": "checkbox_li_" + numberOfCheckboxes,
            "title": "Resize me"
        });

    $(newSpan).append(newCheckbox);
    $(newSpan).append(labelForCheckbox);

    $(newLi).append(newSpan);

    $('#choiceVariable1').append(newLi);

    $(newLi).resizable({
        containment: selectedDragObject,
        handles: "e",                
        minWidth: ($(newSpan).outerWidth(true) + 10),               
        scroll: false,               
    });        

    numberOfCheckboxes++;
    $("#choiceValue").val("");
}
});

CSS:

.tab_container {
    min-height: 150px;
    position: relative;
    border: 1px solid black;
    background-color: aqua;
}

.draggable {
    float: left;
    margin: 0;
    display: inline-block;
    position: relative;
    text-indent: 4px;
    padding: 6px;
    background-color: yellow;
}

.checkbox  {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    margin-left: 0px;
    min-width: 300px;
    min-height: 50px;
    max-width: 980px;
}

ul{    
    display: block;
    list-style-type: none;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

HTML:

<div class="tab_container" title="Tab Container">
    <div class="draggable" id="dragWrapper1" title="I'm draggable">
        <ul class="checkbox" id="choiceVariable1"></ul>
    </div>        
</div>

<input type="text" id="choiceValue"/>
<input type="submit" value="Add" id="addChoice">

<p>Steps to reproduce:</p>
<ol>
    <li>Add some text into box and click Add</li>
    <li>See that you can resize the 'li' within the yellow container on the x axis</li>
    <li>Drag the yellow container to the right</li>
    <li>Resize the 'li' once more</li>
</ol>

非常感谢

Answer 1

似乎只需使用“parent”作为包含选项值即可正常工作

Demo