javascript - 仅下降到可见的元素

Question

我有以下内容：

我正在尝试对其进行设置，以便当您拖动项目时，它只会被拖放到您可以看到的 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"
})

但是，即使只有一个放置区不可见，它也会在两个地方放置元素！

我该如何解决它，以免发生这种情况？

小提琴：http: //jsfiddle.net/maniator/Wp4LU/

无需小提琴即可重新创建页面的额外信息：

HTML：

  <div id="top">
    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>

    <div class="draggable">
      Lorem ipsum dolor sit amet
    </div>
  </div>

  <div id="bottom"></div>

CSS：

.draggable {
    border: 1px solid green;
    background: white;
    padding: 5px;
}

.dragHover{
    background: blue;
}

#top {
    height: 500px;
    overflow-y: scroll;
}
#bottom {
    height: 150px;
    overflow-y: scroll;
    border: red solid 4px;
}

</p>

score 2 · Accepted Answer

如果我猜对了 - 这个应该可以解决你的问题 - http://jsfiddle.net/Wp4LU/60/ 你也可以编写自定义接受函数 - http://jqueryui.com/demos/droppable/#option-accept

代码：

var draggableList = $('#top');

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

        if ($this.hasClass("draggable")) {
            if ($this.position().top >= draggableList.height() || 
                $this.position().top + $this.outerHeight() >= 
                draggableList.height()) 
                return;
        }

        $this.append($dragged.clone());
    },
    hoverClass: "dragHover"
});

score 2 · Accepted Answer

尝试设置accept功能。 工作演示。

$("#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"
});

score 1 · Accepted Answer

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

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;

（旧版本的最后一个“OR”条件被颠倒了，所以它只适用于一个可放置的对象。使用 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;
    ...

因此，除非有人添加了 z-index 感知容差模式，否则您唯一的选择是以某种方式解决该问题。我建议首先将每个可放置的候选者添加到一个集合中，当该放置时，只选择离屏幕“最近”的那个：

$("#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"
})

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

PS 如果修改 jQuery UI 源是一个选项，您可以尝试使用实现 z-index 感知容差模式document.getElementFromPoint，因为对上述问题的回答建议：

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！如果出于同样的原因，也可以作为容差模式实现......）

score 0 · Accepted Answer

如果您只想放在元素上，您可以看到您可以更改选择器：

$(".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"
});

或者当你隐藏一个元素时，用别的东西改变它的可拖动类。

javascript - 仅下降到可见的元素

4 回答 4

Related

Reference