2

現在、チェックボックスを順序付けされていないリストに動的に追加できるサイトを開発しています。「li」をそのリストに追加する際に、「li」はその「ul」コンテナ内でドラッグおよびサイズ変更できる必要があります。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>

どうもありがとう

4

1 に答える 1

2

"parent"封じ込めオプションの値として使用するだけでうまくいくようです

Demo

于 2013-11-04T10:26:26.860 に答える