Question

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

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

请有人帮忙吗？

此问题的简化示例 - 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

JQuery ui resizable没有达到max-width

1 个答案: