Div 上的 jQuery 可排序追加

Question

我有一个购物篮，我需要能够添加多个项目，我已经配置了 jQuery 可排序插件，但是，当我添加超过 1 个额外的项目时，它们会组合在一起，因为我正在添加另一个项目，对于一个放置器 div，我认为这是问题所在，但我如何制作它以便我可以添加更多项目，但仍然保持可排序功能在单个项目上工作？

请帮助或有人可以向我展示一个工作小提琴，其中添加更多然后 1 个食物项目不会将它们分组到 foodplacer div 中

<td>
            <ul id="sortable">
<?php
    $mCount = 1;
    if(isset($_POST['itemDetails']) && is_array($_POST['itemDetails']) && count($_POST['itemDetails']) > 0){
        foreach($_POST['itemDetails'] as $itemDetail){
            if(!empty($itemDetail['title']) || !empty($itemDetail['brand']) || !empty($itemDetail['order']) || !empty($itemDetail['notes'])){
                echo('<li class="ui-state-fooddefault">
                <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][title]" value="'.$itemDetail['title'].'" id="itemDetailTitle'.$mCount.'" onKeyPress="return disableEnterKey(event)" /><br />
                <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][brand]" value="'.$itemDetail['brand'].'" id="itemDetailbrand'.$mCount.'" onKeyPress="return disableEnterKey(event)" /><br />
            <input style="font-size:14px" type="text" size="40" name="itemDetails['.$mCount.'][notes]" value="'.$itemDetail['notes'].'" id="foodNotes'.$mCount.'" onKeyPress="return disableEnterKey(event)" /></li>');
        $mCount++;  
            }
        } 
    } else {
        //INITAL REQUEST IF 0 POST DATA
        echo('<li class="ui-state-fooddefault"><p class="itemDetailTrackNumber">Track '.$mCount.'</p>
        <label for="itemDetailTitle'.$mCount.'">Title</label>
        <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][title]" value="" id="itemDetailTitle'.$mCount.'"  onkeyup="showResult(this.value)/>
        <div id="livesearch"></div>
        <label for="itemDetailbrand'.$mCount.'">brand</label> 
        <input style="font-size:14px" type="text" size="25" name="itemDetails['.$mCount.'][brand]" value="" id="itemDetailbrand'.$mCount.'" onKeyPress="return disableEnterKey(event)" />
        <label for="foodNotes'.$mCount.'">Notes</label><input style="font-size:14px" type="text" size="40" name="itemDetails['.$mCount.'][notes]" value="" id="foodNotes'.$mCount.'" onKeyPress="return disableEnterKey(event)" /></li>');
        $mCount++;
    }

?>
        <script type="text/javascript">
            var currCount = <?php echo($mCount); ?>;
            function addNewItem(){
                jQuery("#foodPlacer").append('<li class="ui-state-fooddefault"><label>Track '+currCount+'</label><label for="itemDetailTitle'+currCount+'">Title</label><input style="font-size:14px" type="text" size="25" name="itemDetails['+currCount+'][title]" value="" id="itemDetailTitle'+currCount+'" onkeyup="showResult(this.value); onclick=showsearch();" autocomplete="off" onKeyPress="return disableEnterKey(event)" /><div id="livesearch"></div><label for="itemDetailbrand'+currCount+'">brand</label><input style="font-size:14px" type="text" size="25" name="itemDetails['+currCount+'][brand]" value="" id="itemDetailbrand'+currCount+'" /><input style="font-size:14px" type="text" size="40" name="itemDetails['+currCount+'][notes]" value="" id="foodNotes'+currCount+'" /></li>');                
                jQuery("#itemDetailTitle"+currCount).keypress(function(event){  return disableEnterKey(event); });
                currCount++;
                return false;
            }
            function disableEnterKey(e){
                var key;
                if(window.event)
                    key = window.event.keyCode;     //IE
                else
                    key = e.which;     //firefox
                if(key == 13)
                    return false;   else    return true;
            }
        </script>
       <a href="#" onclick="addNewItem(); return false;">Add Another food Item</a> <div id="foodPlacer"></div></ul></td>

Answer 1

将其附加到 Sortable 而不是 foodplacer，对不起各位！星期二！