.hide()/.show() and Droppable

Question

当可拖动的元素触发拖动事件时，该元素调用.show()方法，导致我无法将其放置到可放置区域中。我该如何解决这个问题？

$(document).ready(function() {
$(".folder").droppable({
        greedy: true,
        drop: function(event, ui) {
            $(".folder").hide();
        },
        tolerance: 'touch'
    });

$(".folder").hide();
$(".draggable_folder").draggable({ 
    cursor: 'move',
    cursorAt: { top: 8, left: 0 },
    drag: function(event, ui) {
        $(".folder").show();
    },
    helper: function(event) {
        var subject = $(this).find('.message_subject').html();
        return $('<div class="ui-widget-header" style="max-width: 100px;">'+subject+'</div>');
    }
});
});

<ul>
    <li class="folder">{$folders[f_list].name}</a><div style="clear:both"></div></li>
</ul>
<table>
    <tr class="draggable_folder"><td>test</td></tr>
</table>

- tpae

---

我认为我们需要看一下HTML才能帮助你。 - Gert Grenander

我有一个<li class='folder'>，在页面加载时它是隐藏的（使用$(".folder").hide();），然后当我拖动<tr>时，类文件夹调用$(".folder").show();，但我无法将其拖入<li>中。然而，如果它已经显示出来了，那么我就可以把它拖到里面。 - tpae

你能在问题中为.draggable_folder和.folder放置一些HTML标记吗？ - Dan Heberden

我不知道那是否足够的信息 =/ - tpae

Answer 1

在 $(".draggable_folder").draggable 中，将 drag: function(event, ui) 改为 start: function()。这将使 .folder 可见并且可放置的区域将变为活动状态。最终的 draggable 代码如下：

$(".draggable_folder").draggable({ 
  cursor: 'move',
  cursorAt: { top: 8, left: 0 },
  start: function() {
    $(".folder").show();
  },
  helper: function(event) {
    var subject = $(this).find('.message_subject').html();
    return $('<div class="ui-widget-header" style="max-width: 100px;">'+subject+'</div>');
  }
});

- Gert Grenander

---

好东西，没问题。 :) - Gert Grenander