javascript - JQuery UI 拖放(获取 Draggable 值以显示和隐藏文本区域框)

Question

美好的一天!我有一个简单的函数，使用 jquery ui 来展示拖放功能。我想将两个图像(两个 div)拖到一个屏幕(一个 div)中。目标是当图像 #1 被拖放到目标上时，屏幕将显示文本区域框，而当另一个图像被拖动到​​同一屏幕时，文本区域将消失。 jsFiddle示例点击here !

我尝试添加“if(条件)”语法来区分两种不同的状态。然而，它根本不起作用。我的脚本如下:

<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 完成了你在这里询问的事情。请记住，如果您想要的话，您仍然需要将文本区域设置为默认不显示。另外，我更改了 fiddle 中的 css，以便更容易使用。

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

Thats what I did in this fiddle

#screen droppable 的新放置参数

  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();
      }
  },