js_layout とレイヤーの最も単純なドラッグ アンド ドロップ効果の実装コード

実際、ポップアップ レイヤーの場合、ドラッグの本来の目的は非常に単純で、レイヤーを引き離すことで、ポップアップ レイヤーによってブロックされているコンテンツを表示できるようにすることです (もちろん、ドラッグ アンド ドロップ機能です)。はその後継続的に最適化され、ドラッグ アンド ドロップ アプリケーションが便利になりました。つまり、最も典型的な例は iGoogle のカスタマイズされたホームページであり、ユーザーはドラッグ アンド ドロップによってコンテンツ モジュールの順序と位置をカスタマイズできます。

この記事の焦点は、高度な記事である iGoogle のドラッグ アンド ドロップ効果ではありません。タイトルにあるように、最も単純なドラッグ アンド ドロップを実装します。そしてドロップします。
ここでの「最も単純」とは、複数のドラッグ レイヤーの積み重ね順序、ドラッグ範囲の制限、iGoogle の「dragTo」に似た効果などを考慮しないことを意味します。 。 。

それでは、早速、最初に例を示します:

ドラッグしてみてください...
コンテンツ...ここをクリック-->期限内にすべて埋め込みますコードはページ上に直接配置され、ブログ パークのサードパーティ プラグインによりコードの実行効率は高くなりますが、あまりスムーズに実行されない可能性があります

ドラッグ アンド ドロップには実際には 3 つの要素が含まれますマウス イベントの一部である onmousedown、onmouseup、onmousemove をマウスの位置の取得と組み合わせると、レイヤーの左と上で同様の効果を実現できます。

コーディング時に注意すべき点が 2 つあります。1 つは現在のスタイルを取得することです。currentStyle は IE でのみ有効なので、IE 以外の場合は getComputedStyle を使用して取得できます。取得する必要のある属性の数が少ない場合は、obj.style[key] を直接使用して、現在必要な属性値を取得することもできます)

コピーcode コードは次のとおりです:

function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle (o,null)[key ]}//'currentStyle' は ie5.0 のみ

もう 1 つのポイントは、マウスの位置を取得するときにイベントを使用することです。イベントは非常に奇妙なものです。 IE および moz カーネルでは、これはグローバル変数 (正確ではありませんが、理解しやすいだけです) であるため、マウスの位置を取得するときに、イベント

コードをコピー コードは次のとおりです:

bar.onmousedown = function(e){
e = e?e :window.event; //ie、ff のローカル変数
params.isDrag = true;
params._X = e.clientX = e.clientY;


上記の 2 つの点に注意してください。実際に正しいアイデアを組み合わせることができます。難しいことではありません。リファレンス コードを以下に示します。

コードをコピーします コードは次のとおりです:

function getStyle(o,key){return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}// 'currentStyle' は ie5.0 のみ

varrag = function(bar, target){
var params = {
startLeft:0,
startTop:0,
_X:0,
_Y:0,
isDrag:false
}; (target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
bar.onmousedown = function(e){
e = e ?e:window.event; //'event' ie の下のローカル変数、ff params.isDrag = true;
params._X = e.clientX; params._Y = e.clientY>};
document.onmouseup = function(){
params.isDrag = false;
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
ドキュメント。onmousemove = function(e){
var e = e?e:window.event; 🎜>if(params.isDrag){
var curX = e.clientX, curY = e.clientY, desL = curX -params._X parseInt(params.startLeft), desT = curY-params._Y parseInt(params. startTop);
target.style['left'] = desL>=0?desL 'px':0;
target.style['top'] = desT>=0?desT 'px':0 ;
}
}
};


さて、この記事はこれで終わりです。似たような iGoogle のドラッグ アンド ドロップの詳細な記事については、次の機会に続きます。ここでは、ドラッグ アンド ドロップを組み合わせた包括的なポップアップ レイヤーの例を示します。

オプション パラメーターのないボックス (デフォルトは高さ 200 ピクセル、幅 300 ピクセル)

マスクされていないボックス。

このポップアップ レイヤー プラグインは上で述べたもので、ソース ファイルのダウンロードも提供されているので、ここに追加しただけです。これは単なるドラッグ効果です。
ps: コードのハイライト表示のためプラグインを使用すると、マスク レイヤ上に小さな白い四角形が表示されますが、これはまだ処理されていません。 。 。