Question

假设我们在一个页面中有多个可拖动元素和多个可放置目标。每个可拖动元素只有一个可放置的目标。我的问题是：如何测试正确的元素是否被放置在正确的目标上。这是一个示例小提琴：http://jsfiddle.net/D25Rt/

这是示例中的代码：

$("#draggable-red, #draggable-blue, #draggable-green").draggable({ revert: "invalid", containment: "#content"});

$("#droppable-red").droppable({
    accept: "#draggable-red",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
});

$("#droppable-blue").droppable({
    accept: "#draggable-blue",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
});

$("#droppable-green").droppable({
    accept: "#draggable-green",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
});

更具体地说，关于前面的例子，如果我将蓝色球拖过红色框，当我释放蓝色球时，我想显示一个警告（类似“错误框...”）。我是jQuery UI的新手，有人可以给我一些关于我应该如何以及在哪里做这些的提示？在接受选项或放置选项中？

Answer 1

Drop事件是trigerred only when accepted draggable is dropped on droppable，所以我首先要重新考虑使用accept选项 - 你可以传递返回true / false作为参数的函数。

但是！传递给accept的函数在页面上为所有可拖动元素调用，因此创建类似于：

的内容

    accept: function(){
        if($(".ui-draggable-dragging").is("#draggable-red"))
            return true;
        else
            alert("I only accept red ball!");
    },

Causes multiple alerts even if you just try to move other draggable ball.

这样的事情应该没问题：

drop: function(event, ui) {
    if(ui.draggable.is("#draggable-red")){
        $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
    }
    else{
        alert("I accept only red balls!");
        ui.draggable.draggable('option','revert',true);
    }
}

但它必须接受所有元素，因此它突破了你的亮点。

JS小提琴：http://jsfiddle.net/bFj68/1/

希望它有所帮助。

删除时为可拖动对象设置条件 - Jquery - UI

1 个答案: