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

好极了！我有一个简单的函数，使用jqueryui展示拖放功能。我想将两个图像（两个div）拖到一个屏幕（一个div）中。目标是将图像#1拖放到目标上时，屏幕将显示textarea框，而将另一个拖动到同一屏幕时，textarea将消失。JSFIDLE示例点击

我尝试添加“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>

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

$（函数（）{
$（“.sample”）.draggable（{
回复：真
});
$（“#屏幕”）。可拖放（{
宽容：“触摸”，
结束：函数（事件，ui）{
$（this.removeClass（'out'）.addClass（'over'）；}，
输出：功能（事件、用户界面）{
$（this）.removeClass（'over'）.addClass（'out'）；}，
drop：函数（事件、用户界面）{
//我相信这里出了点问题！
var idVal=$（ui.draggable）.attr（'id'）；
如果（idVal==“sample6”）{
$（'#text'）.show（）；}
else if（idVal==“样本5”）{
$（'#text'）.hide（）；}
}
});
}); 

HTML标记如下所示：

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

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

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

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

屏幕可拖放的新拖放参数

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

---

你能贴把小提琴吗？我试图构建一个，但是很难猜测css的内容。我在页面顶部附加了这个脚本的JSFIDLE示例的链接。你可以看到它下面有一个屏幕和可拖动的按钮。我想将“textarea”按钮拖到屏幕上以显示textarea（显示在屏幕上），然后在“delete textarea”框拖放到屏幕中时隐藏textarea。非常感谢！这是一个强大的补丁！