jQuery ui 可拖动元素在滚动 div 之外不能“拖动”答案

【问题标题】：jQuery ui draggable elements not 'draggable' outside of scrolling divjQuery ui 可拖动元素在滚动 div 之外不能“拖动”
【发布时间】：2011-01-07 02:09:42
【问题描述】：

我在一个 div 中有许多元素（浮动 href 标记），它们的高度/宽度都设置了，并且在 CSS 中滚动设置为 overflow: auto。

这是 div 的结构：

<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
    <!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
    <div id="tf_dropBox"></div>
</div></div>

父 div 的 'tf_div_tagsReturn' 和 'tf_div_tagsDrop' 最终将彼此相邻。

这是在使用类名“tag_cell”创建所有“可拖动”元素之后运行的 jQuery，：

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
});

如上所述，可拖动元素在 div 'tf_div_tagsReturn' 内是可拖动的，但它们不会在视觉上拖动到父 div 之外。值得注意的是，如果我拖动其中一个可拖动元素，并将鼠标移到可放置的 div 上，id 为 'tf_dropBox'，然后悬停类被触发，我就再也看不到可拖动元素了。

这是我第一次使用 jQuery，所以希望我只是遗漏了一些非常明显的东西。到目前为止，我一直在阅读文档和搜索论坛，但没有成功:(

更新：

非常感谢 Jabes88 提供的解决方案，使我能够实现我正在寻找的功能。这是我的 jQuery 最终的样子：

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main',
        helper: 'clone',
        start : function() {
        this.style.display="none";
        },
        stop: function() {
        this.style.display="";
        }
    });
    $(".tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
});

【问题讨论】：

这个对我有用：stackoverflow.com/questions/1819626/…
批评：不要混用 " 和 '。坚持其中之一。Muy, muy importante tripleexclamationsign.
设置助手：“克隆”成功了——太棒了！ - 虽然我使用 this.style.visibility='hidden' 来隐藏原件，因为弄乱显示是不好的。

标签： jquery user-interface drag-and-drop scroll

【解决方案1】：

您的可拖动对象是否允许多个实例？然后使用 helper 和 append 选项：

$(".tag_cell").draggable({ 
  helper: 'clone',
  appendTo: 'div#myHelperHolder'
});

然后在你的 css 中你可以将 div#myHelperHolder 的 zindex 设置为 999。如果没有，请尝试仅使用 zindex 选项：

$(".tag_cell").draggable({ 
  zIndex: 999
});

我还会考虑设置 addClasses 以阻止插件添加所有浪费处理器速度的烦人类。

更新：我有一个新的解决方案

好吧，玩了一会儿之后，我想到了这个：滚动选项不会阻止孩子被溢出隐藏。我已经阅读了其他一些帖子，但我找不到单一的解决方案。但我想出了一个完成工作的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.0");
    google.load("jqueryui", "1.7.2");   
    google.setOnLoadCallback(OnLoad);
    function OnLoad(){
        var dropped = false;
        $(".tag_cell").draggable({ 
            addClasses: false,
            revert: 'invalid',
            containment: '#tagFun_div_main',
            helper: 'clone',
            appendTo: '#tagFun_div_helper',
            start: function(event, ui) {
                dropped = false;
                $(this).addClass("hide");
            },
            stop: function(event, ui) {
                if (dropped==true) {
                    $(this).remove();
                } else {
                    $(this).removeClass("hide");
                }
            }
        });
        $("#tf_dropBox").droppable({
            accept: '.tag_cell',
            hoverClass: 'tf_dropBox_hover',
            activeClass: 'tf_dropBox_active',
            drop: function(event, ui) {
                dropped = true;
                $.ui.ddmanager.current.cancelHelperRemoval = true;
                ui.helper.appendTo(this);
            }
        });
    }
    </script>
    <style>
        div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
        div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
        div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; background:#0F0; }
        div#tf_dropBox { display:block; width:100%; height:250px; background:#F0F; }
        span.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
        span.tag_cell.hide { display:none; }
        div#tf_dropBox.tf_dropBox_hover { background:#FFF !important; }
        div#tf_dropBox.tf_dropBox_active { background:#333; }
    </style>
</head>
<body>
    <div id="tagFun_div_main">
        <div id="tf_div_tagsReturn">
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
            <span class="tag_cell"></span>
        </div>
        <div id="tf_div_tagsDrop">
            <div id="tf_dropBox"></div>
        </div>
    </div>
    <div id="tagFun_div_helper">
    <!-- this is where the helper gets appended for temporary use -->
    </div>
</body>
</html>

我粘贴了我的整个代码，以便您试用。以下是简要说明：当您开始拖动项目时，它会隐藏原始项目，克隆它，然后将克隆附加到溢出区域外的容器中。放下后，它会移除原件并将克隆移动到放置区。太好了，所以现在我们已经解决了溢出问题，但遇到了其他一些问题。当您将克隆项目放入放置区时，它会消失。为了阻止这种情况发生，我使用了这种方法：

$.ui.ddmanager.current.cancelHelperRemoval = true;

现在我们已经阻止了助手被移除，但它仍然在“div#tagFun_div_helper”中，而原来的可拖动项目又重新出现了。

ui.helper.appendTo(this);

这会将助手从“div#tagFun_div_helper”转移到我们的放置区。

dropped = true;

这将告诉我们的停止函数从组中删除原始项目，而不是删除“.hide”类。希望对您有所帮助！

【讨论】：

感谢您的回复。我没有使用助手/克隆，但我确实将 zindex 设置为 999，问题仍然存在。我真的不知道问题是什么，我开始怀疑这是否可能，但我不得不想象人们在滚动 div 时一直包含可拖动元素。感谢 addClasses 的建议，我实现了。请分享您对此滚动问题的任何其他建议/想法。
我已更新我的回复以包含一个新的解决方案。看看这个。我还注意到您的一个 div id 在第一个字母
之前有一个空格。我不认为它会影响任何东西，但我只是认为你应该知道 :-)
Jabes - 感谢您的解决方案，感谢您为此付出的时间。我最终使用了您的方法的修改版本来实现我正在寻找的功能。我不需要担心删除后保留在可放置 div 中的元素。关于包含可拖动元素的 div，我在删除其中一个元素后刷新它，新元素基于刚刚删除的内容。我正在用我最终使用的 jquery 更新我原来的问题，非常感谢你回答我的问题！
我很高兴能够帮助 Stu。如果您能抽出一个，我将不胜感激:)
我有同样的问题，并应用了类似于上面贾斯汀解决方案的代码，但请注意，在将元素拖入可放置对象后，它会附加 style=postition:absolute 和顶部和左侧坐标。除非我刷新页面，否则该元素不能在其他地方拖动 - 有没有办法确保帮助克隆获得与原始相同的属性，因此它也是可拖动的？ TIA

【解决方案2】：

在我的情况下，这为我解决了它并且完美地工作！

更新

$(".amigo").draggable({
            revert: "invalid" ,
            helper: function(){
                $copy = $(this).clone();
                return $copy;},
            appendTo: 'body',
            scroll: false
        });

【讨论】：

稍作修改：helper: function () { $copy = $(this).clone(); $copy.css({"list-style":"none","width":$(this).outerWidth()}); return $copy; }
是的，这也是我需要的。我试图在可滚动分页模式下将可拖动的 div 移动到 Telerik MVC 网格之外，而上面的 appendTo 和滚动选项起到了作用。
$copy 对 JQueryUI 有什么特别的意义吗？为什么不return $(this).clone();？
clone() 不会复制已应用于源节点的 CSS 属性。如果您希望能够保留宽度和填充等视觉元素，则必须使用重新应用它们。 $copy 的使用只是一个变量的命名约定，$ 常用来表示该变量引用了一个 jQuery 对象。
我发现使用单引号还是双引号有很大的不同。 appendTo: 'body' 对我不起作用，但 appendTo: "body" 可以。同样，helper: 'clone' 除了 helper: "clone" 之外什么都不做，比你在这里做的更好。