Question

美好的一天！我有一个简单的函数使用jquery ui来展示拖放功能。我想将两个图像（两个div）拖动到一个屏幕（div）中。目标是当图像＃1被拖放到目标上时，屏幕将显示textarea框，而另一个被拖入同一屏幕时，textarea消失了。 jsFiddle示例单击here！

我尝试添加“if（condition）”语法来区分两种不同的状态。但是，它根本不起作用。我的脚本如下：

<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) {
                        //I believe something is wrong here!
              var idVal=$(ui.draggable).attr('id');
                if ( idVal=="sample6"){     
                  $('#text').show();}
                  else if(idVal=="sample5"){
                $('#text').hide();}

                  }

                });
                 }); 
  </script>

HTML标记如下：

<div id="screen" style="float:left">

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

</div>
</div>

<div id="memo"></div>

<div id="sample6" class="sample">
  <p>Show the Textarea</p>
</div>
<div id="sample5" class="sample">
  <p>Delete the Textarea</p>
</div>
</div>

我不知道Jquery UI是否可以让我将具有2个或更多“id”的不同对象拖放到单个可放置区域以触发/触发不同的结果（“显示或隐藏文本框或更改图像”）。欢迎任何有用的建议或解决方案！

Answer 1

我认为这个jsFiddle完成了你在这里问的问题。请记住，你仍然需要设置textarea默认不显示，如果这是你想要的。另外，我更改了小提琴中的CSS以便更容易使用。

基本上，我只是做了一个console.log（idVal），看你得到了正确的id（“sample6和sample5”），但只检查了id末尾的数字，所以我改了你的if声明与正确的ID进行比较。看起来您可能也在尝试使用数据属性，但在最后一个可拖动元素上只有一个。

Thats what I did in this fiddle

#screen droppable的新DROP参数

  drop: function(event, ui) {
      var idVal=$(ui.draggable).data('num');
      console.log(idVal);//you can remove this
      if ( idVal=="sample6"){     
          $('#text').show();
      }
      else if(idVal=="sample5"){
        $('#text').hide();
      }
  },

JQuery UI拖放（获取Draggable值以显示和隐藏textarea框）

1 个答案: