jquery - 接受使用 jQuery 进行拖放的选项

Question

$(".ssource").droppable({
        addClasses: false,
        greedy: true,
        accept:function(ele){
            if($(this).hasClass("Dropped") != true){
                 return true;
            }
            }else{
                 return false;
            }
        },
        drop: function(event, ui) {
                 $(this).addClass("Dropped");
                },
});

接受 droppable 的选项是在单击 Draggable 元素时调用，但我想检查当它悬停在 Droppable 区域时可拖动是否有效。

Answer 1

您可以使用 Over 和 Out 来验证 Droppable 区域。

$(".ssource").droppable({
        greedy: true,
        //Active the Drop Area
        over: function(event, ui) {
           $(this).addClass("validArea");
        },
        //Deactive the Drop Area if the item drop.
        drop: function(event, ui) {
           $(this).removeClass("validArea");
        },
        //Deactive the Drop Area if item outside the area.
        out: function(event, ui) {
           $(this).removeClass("validArea");
        }
});

ValidArea 是您的新类，可在图像悬停在该区域上时使 Droppable 区域看起来有效。

Answer 2

在文档中，有一个可拖动的示例链接到 droppable。在可放置元素中，使用相同的“接受”选项

$( "#droppable" ).droppable({
  accept: ".ssource",