2

我目前正在开发一个能够动态地将复选框添加到无序列表的站点。在将“li”附加到该列表时，应该能够在该“ul”容器中拖动“li”并调整其大小。通过使用 jquery 的可拖动来拖动“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>

非常感谢

4

1 回答 1

2

似乎仅使用"parent"作为遏制选项值就可以正常工作

Demo

于 2013-11-04T10:26:26.860 回答