jquery ui draggable元素不是’draggable’滚动div之外

前端之家收集整理的这篇文章主要介绍了jquery ui draggable元素不是’draggable’滚动div之外前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我超级烂。

我有很多元素(浮动href标签)在一个div与设置的高度/宽度,滚动设置为“溢出:自动”在CSS。

这是divs的结构:

<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’最终将浮动在彼此旁边。

这里是在所有’draggable’元素创建类名’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的外部拖动。值得注意,如果我拖动其中一个可拖动元素,并将鼠标移动到droppable div,id’tf_dropBox’,然后hoverclass被触发,我只是看不到draggable元素了。

非常感谢任何建议,帮助我找到一个解决方案。这是我第一次使用jquery,所以希望我只是错过了一些超级明显的东西。我一直在阅读文档和搜索论坛迄今为止没有prevailing:

感谢您的时间。

更新:

很多感谢Jabes88提供的解决方案,让我实现我所寻找的功能,这里是我的jquery最终看起来像,随时评论它,因为我是新的jquery。

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

谢谢Jabes88,你是我的救主!作品漂亮:)

解决方法

@H_301_31@ 你要允许多个实例与可拖动对象吗?然后使用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',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',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相关文章