1

愉快的一天！我有一个使用 jquery ui 来展示拖放功能的简单功能。我想将两个图像（两个 div）拖到一个屏幕（一个 div）中。目标是当图像#1 被拖放到目标上时，屏幕将显示 textarea 框，而另一个被拖入同一屏幕时，textarea 消失。jsFiddle 示例点击这里！

我尝试添加“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”的不同对象拖放到单个可拖放区域以触发/触发不同的结果（“例如显示或隐藏文本框或更改图像”）。欢迎任何有用的建议或解决方案！

4

1 回答 1

0

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

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

这就是我在这个小提琴中所做的

#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();
      }
  },
于 2013-08-22T20:37:52.293 回答