将拖放文本设为只读，同时保持可编辑的文本区域

Question

我在拖放Js时遇到麻烦。我希望已放入文本区域的文本为readOnly，而其余文本区域是可编辑的。

JS

 $modal = '<script language="javascript" type="text/javascript">
        $(function() {
            $("#allfields li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "grab",
                revert: "valid"
            });
            initDroppable($("#TextArea'.$IDCount.'"));
            function initDroppable($elements) {
                $elements.droppable({
                    hoverClass: "textarea",
                    accept: ":not(.ui-sortable-helper)",
                    drop: function(event, ui) {
                        var $this = $(this);

                        var tempid = ui.draggable.text();
                        var dropText;
                        dropText = " {" + tempid + "} ";
                        var droparea = document.getElementById("TextArea'.$IDCount.'");
                        var range1 = droparea.selectionStart;
                        var range2 = droparea.selectionEnd;
                        var val = droparea.value;
                        var str1 = val.substring(0, range1);
                        var str3 = val.substring(range1, val.length);
                        droparea.value = str1 + dropText + str3;
                        dropText.disableAutoInline = true;

                    }
                });
            }
        });
    </script>';

PHP

 $modal = $modal.'<li id="node-'.$IDCount.'-'.$row5['ID'].'">'.$row5['varname'].'</li>';
  }



           $modal = $modal .'</ul>
        </div>
        <div class="dropitems">

            <textarea id="TextArea'.$IDCount.'" cols="40" name="formula"
            rows="2"  value = '.$row5['varname'].'>'.$formula.' </textarea>
        </div>
    </div>

非常感谢您的帮助。