web-dev-qa-db-ja.com

jQuery UIのドラッグ可能な要素は、スクロールdivの外側では「ドラッグできない」

CSSでスクロールをoverflow: autoに設定して、高さ/幅を設定したdivに多くの要素（フローティングhrefタグ）があります。

これは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の外に視覚的にドラッグすることはありません。注目に値するのは、ドラッグ可能な要素の1つをドラッグし、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();
        }
    });
});
jqueryuser-interfacedrag-and-dropscroll
35
Seth

ドラッグ可能なオブジェクトで複数のインスタンスを許可しますか？次に、ヘルパーと追加オプションを使用します。

$(".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」クラスを削除する代わりに、グループから元のアイテムを削除するようにストップ関数に指示します。お役に立てば幸いです！

42
Justin Bull

私の場合、これで解決し、完璧に機能します！

[〜＃〜] updated [〜＃〜]

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