Javascript 仅下降到可见的元素

我有以下资料：

我试图将其设置为，当您拖动项目时，它只会被拖放到您可以看到的div元素，并且没有被覆盖

所以我用了这个js：

$(".draggable").draggable({
    helper: "clone"
})
$("#bottom, .draggable").droppable({
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },
    hoverClass: "dragHover"
})​

但它会将元素同时放置在两个位置，即使只有一个放置区域不可见

如何修复它，使其不会发生

小提琴：

---

不使用小提琴重新创建页面的额外信息：

HTML:

---

​

如果我没弄错的话-这个应该能解决你的问题- 还可以编写自定义接受函数-

代码：

根据来源（jquery.ui.droppable.js），drop操作将搜索每个符合条件的droppable，并将drop函数应用于与之相交的每个droppable：

drop: function(draggable, event) {

    var dropped = false;
    $.each($.ui.ddmanager.droppables[draggable.options.scope] || [], function() {

        if(!this.options) return;
        if (!this.options.disabled && this.visible && $.ui.intersect(draggable, this, this.options.tolerance))
            dropped = this._drop.call(this, event) || dropped;

（旧版本的最后一个“或”条件被颠倒，因此它只适用于单个可拖放项。请使用jQuery 1.5.2/jQuery UI 1.8.9尝试您的小提琴，并查看它只会拖放到一个元素，尽管是“错误的”元素…）

当前在

$.ui.intersect

函数中实现的每个公差模式仅考虑（x，y）坐标：

switch (toleranceMode) {
    case 'fit':
        return (l <= x1 && x2 <= r
            && t <= y1 && y2 <= b);
        break;
    case 'intersect':
        return (l < x1 + (draggable.helperProportions.width / 2) // Right Half
            && x2 - (draggable.helperProportions.width / 2) < r // Left Half
            && t < y1 + (draggable.helperProportions.height / 2) // Bottom Half
            && y2 - (draggable.helperProportions.height / 2) < b ); // Top Half
        break;
    ...

现在，实现最接近屏幕的比较器是一个棘手的部分。描述了渲染引擎应该如何对要绘制的元素进行排序，但到目前为止，我还没有找到一种简单的方法来访问这些信息。我也在这里，也许有人会找到一个好办法

---

另外，如果修改jQuery UI源是一个选项，那么您可以尝试实现一个z索引感知容差模式，如所建议的问题所述：

var x1 = (draggable.positionAbs || draggable.position.absolute).left, x2 = x1 + draggable.helperProportions.width,
    y1 = (draggable.positionAbs || draggable.position.absolute).top, y2 = y1 + draggable.helperProportions.height;
switch (toleranceMode) {
    ...
    case 'z-index-aware':
        return document.elementFromPoint(x1,y1) == droppable;
        break;

（这将确保只有拖动台左上角正下方的元素被视为“足够好”的下降目标-不理想，但比我们目前的情况要好；可以采用类似的解决方案来替代鼠标指针坐标）

---

而且，不，您不能在前面介绍的解决方法中使用此方法：在发生拖放时，拖动辅助对象是离屏幕最近的元素。。。（编辑：d'oh！如果作为公差模式实施，它也不起作用，原因相同…

尝试使用

接受功能进行设置。

$("#bottom, .draggable").droppable({
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },
    accept: function () {
        var $this = $(this), divTop= $("#top");
        if ($this.is(".draggable")) {
          return $this.offset().top < divTop.offset().top + divTop.height() ;
        }
        return true;
    },
    hoverClass: "dragHover"
})​;​

$（“#底部，.draggable”）.可拖放({
drop：函数（事件、用户界面）{
变量$this=$（this），
$dragrad=$（ui.draggable）；
$this.append（$draugd.clone（））；
},
接受：函数（）{
var$this=$（this），divTop=$（“#top”）；
如果（$this.is（“.draggable”））{
返回$this.offset（）.top
如果您只想删除元素，您可以看到您可以更改选择器：

$(".draggable:visible").draggable({
    helper: "clone"
});
$("#bottom, .draggable:visible").droppable({
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },
    hoverClass: "dragHover"
})​;

或者，当您隐藏某个元素时，通过其他方式更改其“可拖动类”。
由于它无法在live server中解决此问题，下面是一个使用disabled属性模拟
事件的示例。stopImmediatePropagation
到其他UI小部件，如果找不到更好的方法，希望它能得到改进。@Neal你不认为我们可以使用一些jquery属性，比如$this.is（“：visible”）。我对jquery不太了解，但是你可以说这是一个新手的尝试，它在小提琴中很好地工作。。。但在我的真实代码中它似乎不起作用（看起来有点不同）…真是太棒了^ ^这似乎起作用了：-）。我还要再测试一下：-D。非常感谢你@Neal那时候我似乎没有弄明白真正的问题。看起来你是从另一个帖子得到答案的。祝你好运
$("#bottom, .draggable").droppable({
    over: function(event, ui) {
        if ( !ui.draggable.data("drop-candidates") )
            ui.draggable.data("drop-candidates",[]);
        ui.draggable.data("drop-candidates").push(this);
    },
    out: function(event, ui) {
        var that = this,
            candidates = ui.draggable.data("drop-candidates") || [];
        ui.draggable.data("drop-candidates", $.grep(candidates, function(e) {
            return e != that;
        });
    },
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        var candidates = $.data("drop-candidates").sort(closestToScreen);
        if ( candidates[0] == this )
            $this.append($dragged.clone());
    },
    hoverClass: "dragHover"
})​

var x1 = (draggable.positionAbs || draggable.position.absolute).left, x2 = x1 + draggable.helperProportions.width,
    y1 = (draggable.positionAbs || draggable.position.absolute).top, y2 = y1 + draggable.helperProportions.height;
switch (toleranceMode) {
    ...
    case 'z-index-aware':
        return document.elementFromPoint(x1,y1) == droppable;
        break;

$("#bottom, .draggable").droppable({
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },
    accept: function () {
        var $this = $(this), divTop= $("#top");
        if ($this.is(".draggable")) {
          return $this.offset().top < divTop.offset().top + divTop.height() ;
        }
        return true;
    },
    hoverClass: "dragHover"
})​;​

$(".draggable:visible").draggable({
    helper: "clone"
});
$("#bottom, .draggable:visible").droppable({
    drop: function(event, ui) {
        var $this = $(this),
            $dragged = $(ui.draggable);
        $this.append($dragged.clone());
    },
    hoverClass: "dragHover"
})​;