个人中心
gpt4 book ai didi

jQuery ui 可拖动元素不在滚动 div 之外 'draggable'

转载 作者：行者123 更新时间：2023-12-03 21:29:42 24 4
gpt4 key购买 nike

我在一个 div 中有许多元素( float 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”最终将彼此相邻 float 。

这是在使用类名“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 之外。值得注意的是，如果我拖动其中一个可拖动元素，并将鼠标移动到 id 为“tf_dropBox”的可放置 div 上，则会触发悬停类，我只是无法再看到可拖动元素了。

这是我第一次使用 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();
        }
    });
});

最佳答案

您是否允许多个可拖动对象实例？然后使用助手和附加选项:

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

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

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

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

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

好吧，在玩了一段时间后，我想出了这个:滚动选项并不能阻止 child 因溢出而被隐藏。我读过其他一些帖子，但找不到单一的解决方案。但我想出了一些解决办法来完成工作。

<!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”类。希望有帮助!

关于jQuery ui 可拖动元素不在滚动 div 之外 'draggable'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2098387/

24 4 0
文章推荐： jquery - 如何在 jQuery 中检测水平滚动？
文章推荐： jquery - 如何解决/破解 IE8 中半透明 PNG 褪色问题？
文章推荐： jquery - 如何编写 "if not class"jQuery 选择器？
文章推荐： jquery - Twitter Bootstrap 隐藏 css 类和 jQuery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com