Question

我想将JQuery可调整大小的函数添加到某个区域中的droppable（已删除）项目（在本例中为屏幕）。到目前为止，拖放功能运行良好而没有问题。无论何时我将一个小盒子拖到屏幕上，屏幕都会改变背景颜色或内容。你可以在这里看到jsFiddle！ http://jsfiddle.net/jengunfan/mgLTu/9/！但是，当我使用可调整大小的（'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>

我还修补了我的html标记，如下所示：

<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>

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

Jquery UI Droppable和Resizable：使用Resizable函数删除Div（带图像）

0 个答案: