Question

我有一个可拖动元素列表，我希望将其放入各种容器中。可放置的容器列在可折叠的div中，因为它们中有很多。

简而言之，droppable结构如下所示： <滑动容器>多个droppables（隐藏在滑动容器内）

当我将一个元素拖到滑动容器上时，它会触发slideDown（） - 方法（意味着容器本身在技术上也是一个可放置的，使用hover-option）。这揭示了里面的所有droppables，我可以把我的元素放到我想要的地方。

这部分完美无缺。

这个问题有点奇怪，但在几乎所有的浏览器中都是一致的。我有多个这些滑动容器堆叠在一起。当一个容器滑动打开时，它会将其他容器向下推到页面上 - 或者至少，这就是我所看到的。然而，当我继续拖动我的元素时，它就像某种＆＃34;鬼＆＃34;被推下的容器留下了。当我将我的可拖动元素移动到其中一个＆＃34;推动＆＃34;容器曾经是，它仍会触发自己的slideDown（），即使我没有真正触及它。

当然，对于位于堆栈底部的容器来说这不是问题，因为它在打开时不会将任何其他容器推开。所有其他人都有这个＆＃34;鬼＆＃34; -problem。

唯一的解决方案是将元素拖到我想要的容器上，然后让它展开。然后我将元素拉到一边，确保我不要触摸堆叠的容器。我将它一直拖到页面底部，以触发窗口滚动事件。一旦窗口滚动，元素就会以某种方式刷新＆＃34;所有这些鬼容器都消失了。

这告诉我问题与重绘或重新绘制有关。我已经尝试了在代码中触发此效果的各种方法，但只有当我将元素拖到页面底部时才会发生这种情况。如果我使用箭头键，向下翻页og鼠标滚动它不起作用。

你有什么建议吗？

就像我指出的那样，所有主流浏览器都会出现同样的问题，因此很可能是JQuery UI中的设计缺陷导致了这种行为。

TLDR;当我拖动元素时，即使可移动的元素本身被移动（并且我继续拖动），可放置的目标也不会刷新/重绘/更新。它只会在我拖动到页面底部以触发滚动时更新，或者如果我让可拖动元素再次将其重新拾取。

更新：

以下是一些示例代码：https://jsfiddle.net/n6hu7vah/

<html><head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head><body>

<div class="row">
    <div class="container">Drag the box over the upper container.<br />Drag downwards, and watch how the other containers react before you even touch them.<br />(Tested in Chrome)<br /><br /></div>
</div>
<div class="row">
    <div class="col-xs-6" id="left"></div>
    <div class="col-xs-6" id="right"></div>
</div>

<script>

// A draggable element

var e = $(document.createElement("div")).attr("class", "alert alert-danger pull-left").css("position", "absolute").css("white-space", "nowrap").css("z-index", "1051").html("Drag me!");
e.draggable({});
$("#left").append(e);



// Some droppable containers that slide out

var p = $(document.createElement("div")).attr("class", "panel panel-primary");
var h = $(document.createElement("div")).attr("class", "panel-heading").html("<h3 class=\"panel-title\">Title</h3>");
var b = $(document.createElement("div")).attr("class", "panel-body").html("<p>Lots<p>of<p>content");

p.append(h);
p.append(b);

$("#right").append(p.clone());
$("#right").append(p.clone());
$("#right").append(p.clone());
$("#right").append(p);

$("div.panel-heading").droppable({
    over: function() {
        $(this).parent().children("div.panel-body").slideDown();
    }
});
$("div.panel-body").hide();
</script></body></html>

带隐藏Droppable的JQuery UI Draggable

0 个答案: