Trouble using jquery ui resizeable, draggable and nicEdit
===

I would like to create some  resizeable and draggable div tags contain textarea tags with jQueryUI.And I also want to use nicEdit to format text inside these textarea tags.But i can't combine them,maybe.I can't edit text if i use $(element).resizeable().draggable().Here is my code:

    <html>
    <head>
    <title>Trouble using  jquery ui resizeable, draggable and nicEdit</title>
    <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
    <script src="nicEdit/nicEdit.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-latest.js"></script>
    <script type="text/javascript">
   
    $(document).ready(function(){
    var btnlist=['fontSize','fontFamily',
                    'bold','italic','underline','strikeThrough',
                    'left','center','right','justify',
                    'ol','ul','hr',
                    'indent','outdent',
                    'forecolor','bgcolor',
                    'subscript','superscript','removeformat'];

    var myNicEditor = new nicEditor({iconsPath : 'nicEdit/nicEditorIcons.gif',buttonList     :btnlist });
    myNicEditor.setPanel('myNicEdit');  
    function ID()
    {
    var id="id";
    var random_number=Math.round(Math.random()*1000000);
    id+=random_number;
    return id;
    }

    $('#a').click(function(){
      var id=ID();
      $('#content').append('<div class="d" style="width: 100px;height:100px;"><textarea        style="width:100%;height: 100%" id='+id+'></textarea></div>');
    myNicEditor.addInstance(id);
    jQuery('.d').draggable().resizable();//If i remove this line,it work ok.
    });

    }); 
    </script>
    </head>
    <body>
    <div>
    <button id="a">Add</button>
    <div id="myNicEdit" style="width: 200px;" ></div>
    <br />
    <div id="content">
    </div>
Can anyone give some solutions for me!Thank a lot!
   
    </div>

</body>
</html>