Javascript Jquery UI可拖放和可调整大小：使用可调整大小的函数生成拖放的Div（带图像）

我想将JQuery resizeable函数添加到特定区域中的可拖放（dropable）项中（在本例中为屏幕）。到目前为止，拖放功能运行良好，没有问题。每当我拖动一个小框到屏幕上，屏幕就会改变背景颜色或内容。你可以在这里看到JSFIDLE！但是，当我使用可调整大小的（'enable'）脚本对可拖放项进行排序时，它根本不起作用，甚至禁用了原始的droppabe函数

js脚本如下所示：

<script>
$(document).ready(function(){

    $( ".draggable" ).draggable();
    $( "#block" ).draggable();


});



</script>


  <script>
  $(function() { 
  $(".sample").draggable({ 
  revert: true     
  });

   $("#screen").droppable({ 
      tolerance: 'touch', 
      over: function(event, ui){ 
       $(this).removeClass('out').addClass('over'); },
         out: function(event, ui) {
          $(this).removeClass('over').addClass('out'); }, 
          drop: function(event, ui) {
              var idVal=$(ui.draggable).attr('id');
                console.log(idVal);
          if ( idVal=="sample6"){     
              $('#text').show();
          }

          else if (idVal=="sample1"){
            $("#screen").removeClass().addClass('bg1'); 
          }
          else if (idVal=="sample2"){
            $("#block").removeClass().addClass('bg2').resizable(); 
         }
           else if (idVal=="sample3"){
            $("#screen").removeClass().addClass('bg3'); 
          }
           else if (idVal=="sample4"){
            $("#block").removeClass().addClass('bg4'); 
            $("#sample4").resizable();
          }
           else if (idVal=="sample5"){
            $("#screen").removeClass().addClass('bg5'); 
          }


          }
        });
    }); 
  </script> 

<div id="container">
<div id="header"><h2>JP-Box JQuery Plugin</h2></div>
<div id="screen" style="float:left">
<div id="block"  style="float:left; margin-left:50px; margin-top:100px;"></div>

<div id="text" class="draggable" ><textarea  style="border:hidden; color: yellow; background-color: transparent; z-index:1000px;">Text Here!</textarea>

</div>


</div>
<div id="display" style="position:relative;float:left">
<div id="memo"></div>

<div id="sample1" class="sample">
  <p><img src="images/grey.jpg" width="50px" height="50px" /> </p>
</div>
<div id="sample2" class="sample">
  <p><img src="images/smiley1.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample3" class="sample">
  <p><img src="images/blue.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample4" class="sample">
  <p><img src="images/smiley2.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample5" class="sample">
  <p><img src="images/purple.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample6" data-num="6" class="sample">
  <p><h3>Text Area</h3></p>
</div>
</div>
<div style="clear:both"></div>



<div style="clear:both;"></div>
<div id="footer">test</div>

$（文档）.ready（函数（）{
$（“.draggable”）.draggable（）；
$（“#块”）.draggable（）；
});
$（函数（）{
$（“.sample”）.draggable（{
回复：真
});
$（“#屏幕”）。可拖放（{
宽容：“触摸”，
结束：函数（事件，ui）{
$（this.removeClass（'out'）.addClass（'over'）；}，
输出：功能（事件、用户界面）{
$（this）.removeClass（'over'）.addClass（'out'）；}，
drop：函数（事件、用户界面）{
var idVal=$（ui.draggable）.attr（'id'）；
console.log（idVal）；
如果（idVal==“sample6”）{
$（'#text'）.show（）；
}
else if（idVal==“sample1”）{
$（“#屏幕”）.removeClass（）.addClass（'bg1'）；
}
else if（idVal==“样本2”）{
$（“#块”）.removeClass（）.addClass（'bg2'）.Resizeable（）；
}
else if（idVal==“sample3”）{
$（“#screen”）.removeClass（）.addClass（'bg3'）；
}
else if（idVal==“样本4”）{
$（“#块”）.removeClass（）.addClass（'bg4'）；
$（“#样本4”）.resizeable（）；
}
else if（idVal==“样本5”）{
$（“#screen”）.removeClass（）.addClass（'bg5'）；
}
}
});
}); 

我还对html标记进行如下修补：

<script>
$(document).ready(function(){

    $( ".draggable" ).draggable();
    $( "#block" ).draggable();


});



</script>


  <script>
  $(function() { 
  $(".sample").draggable({ 
  revert: true     
  });

   $("#screen").droppable({ 
      tolerance: 'touch', 
      over: function(event, ui){ 
       $(this).removeClass('out').addClass('over'); },
         out: function(event, ui) {
          $(this).removeClass('over').addClass('out'); }, 
          drop: function(event, ui) {
              var idVal=$(ui.draggable).attr('id');
                console.log(idVal);
          if ( idVal=="sample6"){     
              $('#text').show();
          }

          else if (idVal=="sample1"){
            $("#screen").removeClass().addClass('bg1'); 
          }
          else if (idVal=="sample2"){
            $("#block").removeClass().addClass('bg2').resizable(); 
         }
           else if (idVal=="sample3"){
            $("#screen").removeClass().addClass('bg3'); 
          }
           else if (idVal=="sample4"){
            $("#block").removeClass().addClass('bg4'); 
            $("#sample4").resizable();
          }
           else if (idVal=="sample5"){
            $("#screen").removeClass().addClass('bg5'); 
          }


          }
        });
    }); 
  </script> 

<div id="container">
<div id="header"><h2>JP-Box JQuery Plugin</h2></div>
<div id="screen" style="float:left">
<div id="block"  style="float:left; margin-left:50px; margin-top:100px;"></div>

<div id="text" class="draggable" ><textarea  style="border:hidden; color: yellow; background-color: transparent; z-index:1000px;">Text Here!</textarea>

</div>


</div>
<div id="display" style="position:relative;float:left">
<div id="memo"></div>

<div id="sample1" class="sample">
  <p><img src="images/grey.jpg" width="50px" height="50px" /> </p>
</div>
<div id="sample2" class="sample">
  <p><img src="images/smiley1.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample3" class="sample">
  <p><img src="images/blue.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample4" class="sample">
  <p><img src="images/smiley2.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample5" class="sample">
  <p><img src="images/purple.jpg" width="50px" height="50px" /></p>
</div>
<div id="sample6" data-num="6" class="sample">
  <p><h3>Text Area</h3></p>
</div>
</div>
<div style="clear:both"></div>



<div style="clear:both;"></div>
<div id="footer">test</div>

jpbox JQuery插件
这里有文字！





文本区

测试

希望任何人都能为这个问题提供一些可能的解决方案或建议