JQuery的可调整大小没有达到最大宽度

我目前正在开发一个网站，有能力将复选框动态添加到无序列表。在'li'追加到列表中，'li'应该能够在'ul'容器中被拖动和调整大小。我用jQuery的可拖动拖动'li'没有问题，但是我目前遇到了可调整大小的功能问题。尽管'li'最初可以调整大小，但是一旦可拖动的div（'ul'）容器被进一步拖动到屏幕上，'li'在再次调整大小时会碰到一个看不见的墙。这个问题可以通过将'li'添加到外部div来解决，尽管这在无序列表语法中显然是错误的。JQuery的可调整大小没有达到最大宽度

请问有人可以帮忙吗？

这个问题的一个简单的例子 - 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>

许多谢谢小号

来源

2013-11-04 Dom

看起来工作得很好只是用"parent"作为遏制期权价值

Demo

来源

2013-11-04 10:26:26 charlietfl

我怀疑这将是简单的东西，但哇！谢谢！ – Dom

不会感觉不好...我曾经在墙上撞过头，试图获得一些密集的用户界面设置，并找出许多选项中的细微差别......以及如何调整它们以便一起玩 – charlietfl

JQuery的可调整大小没有达到最大宽度

回答

相关问题