mass Framework droppableプラグイン

mass Frameworkドラッグ＆ドロップコンポーネントの第2弾、8大動作コンポーネントの1つ、droppableがついに完成しました.ドラッグアンドドロップブロックと配置オブジェクトの関係を処理するために使用されます.私のフレームにオブジェクトを置くと、ターゲットフィールドというもっと良い名前があります.ドラッグアンドドロップブロックはミサイルに相当し、その活動範囲が射程であり、配置対象が標的場である.
HTML 5オリジナルドラッグ＆ドロップAPIでは、1つの要素がターゲットフィールドになると、次の4つのイベントをバインドできます.

dragenter:カーソルがターゲットフィールドに入ると、このコールバックが実行されます.

dragover:カーソルがターゲットフィールドに入った後、このコールバックを実行します.

dragleave:カーソルがターゲットフィールドに入ると、このコールバックが実行されます.

drop:カーソルがターゲットフィールドに入った後、その上に残って移動したときにマウスを離すと、このコールバックが実行されます.

上記の説明からも分かるように、オリジナルのAPIはカーソルと配置の関係しか処理できません.mouseenter、mouseleave、mousemoveと同じように、他のトリガルールを交換したい場合は料理を止めます.例えば、ブロックの半分の面積をドラッグしてターゲットフィールドに入ってからdragenterをトリガしたい場合や、ターゲットフィールド内に完全に位置してからトリガしたい場合、交差があればトリガしたい場合などです.そのため、これらの原生事件だけでは十分ではない.したがってmass Frameworkのdroppableパラメータにはtoleranceというトリガモードをカスタマイズするためのものがあります.デフォルトはpointerモード、すなわちW 3 Cのモードであり、マウスがターゲットフィールドに入ってからdragenterコールバックをトリガーし、離れるとdragleaveコールバックをトリガーします.intersectモードでは、ドラッグブロックがターゲットフィールドと重なる部分があるとdragenterコールバックがトリガーされます.middleモードでは、ドラッグブロックの半分の面積がターゲットフィールドに入るとdragenterコールバックがトリガーされます.fitモードは、ドラッグブロックが完全にターゲットフィールド内にある場合にのみdragenterコールバックをトリガーします.
正直、mass Frameworkのdroppableはscript.を参考にしています.aculo.us、これは偉大なライブラリで、史上最強のアニメーションライブラリで、今まで誰も敵わなかった.jQuery uiも同じでscript.aculo.usに基づいて改善を行う.しかしscript.aculo.usでもjQuery uiでもdroppableとdragableは2つの異なるシステムであり、イベントは2つの要素に縛られている.drag,dragstart,dragendはdraggable管,drop,dragenter,dragmove,dragleaveはdroppabke管に帰属し,これはその内在的な実現メカニズムに深刻に反している.ドラッグすると、自己方位の大きさと様々なイベントのコールバックを含むデータボディが生成されます.また、許容可能なターゲットフィールドが存在する配列もあります.このjquery uiはacceptというパラメータで処理され、セレクタエンジンによって配置オブジェクトのセットを待ってから、方位サイズとイベントコールバックを含むデータ体に変換されます.script.aculo.USはDroppablesを通過する.addでデータベースを追加します.droppableのデータ体は必ずdraggableのデータ体に含めなければならないが,オーバーラップ交差などの関係を判定できない.それなら、最初からパラメータをすべて1つに定義する必要があります.加えて、mass Frameworはkがdroppableを投げるという意味であり、置くという意味ではなく、droppableがdraggableの一種の増強であると考え、draggableがあってこそdroppableがあるので、ここではscript.aculo.usのインタフェース定義.droppableを裏切ってdraggableにするのも、「超イノベーション」でしょう(「マイクロイノベーション」よりN倍強いという意味!)

$.define("droppable","more/draggable",function(Draggable){

    Draggable.implement({
        //  droppable     
    })

    $.fn.droppable = function( hash ){
        return this.draggable( hash )
    }
});

以下は例であり、より多くの例はドキュメントはgithubを参照である.

            $.require("ready,more/droppable",function(){
                $('.drag').droppable({
                    range:".drop",//     CSS   
                    hoverClass: "active",//             
                    tolerance:  function( event, drg, drp ){//      
                        var r = drp.width / 2, x = drp.left + r, y = drp.top + r,
                        h = Math.min( Math.abs( x - drg.left ), Math.abs( x - drg.right ) ),
                        v = Math.min( Math.abs( y - drg.top ), Math.abs( y - drg.bottom ) );
                        if ( drg.top < y && drg.bottom > y )
                            return h <= r ? 1 : 0;
                        else if ( drg.left < x && drg.right > x )
                            return v <= r ? 1 : 0;
                        else
                            return Math.sqrt( h * h + v * v ) <= r ? 1 : 0;
                    } ,
                    drop: function(event, dd){//           
                        dd.dropper.toggleClass("dropped");
                    },
                    dragleave:function(event, dd){
                        dd.dropper.removeClass("dropped");
                    }
                });
            });

ブログ左上のFLASHクロックアニメーションが出てからドラッグしてください.