ドラッグ＆ドロップクロージャ機能のjs実装詳細紹介_javascriptスキル

jsドラッグ

シンプルなクロージャ実装方法を採用

コードをコピー コードは以下の通り:

/**
* JetBrains WebStorm で作成されました。
* ユーザー: lsj
* 日付: 12-11-24
* 時刻: 午後 12 時 59 分
* このテンプレートを変更するには、ファイル | を使用します。設定 |ファイルテンプレート。
*/
varragmanager=(function()
{
//モバイル要素の Z 軸座標を識別します
var index_z=1 ;
//現在のドラッグ要素
var drganow;
//マウスが移動したときの div の左側からの距離is clicked
varrelativex =0;
//マウスがクリックされたときの div の上部からの距離
varrelative=0;
//マウスが移動したかどうかを識別します
var isout=false;
return {
/* *
* マウス リフト イベントをドキュメントにバインドします。これは主に、マウスの動きが速すぎて EL 領域から飛び出すのを防ぐためです
*/
bingDocOnMouseUp:function()
{
//主にマウスを防ぐためにグローバル onmouseup イベントを登録します動きが速すぎてマウスと el が同期しなくなります。
document.onmouseup=function( e)
{
var ev = window.event ||
if(isout && ragbegin)
{
//div の相対位置を変更します
drganow.style.left = (ev.clientX-relativex) 'px';
drganow.style.top=(ev. clientY-relative) 'px';
drganow.style.cursor='normal';
isout=false;
}
>/**
* イベントを挿入された要素にバインドします
* @param el
*/
registerElementEv:function(element)
{
element .onmousedown=function(e)
{
var ev = window.event || e;
var clientx=ev.clientX;
var clienty= ev.clientY;
var left= parseInt(this.style.left.substring(0, this.style.left.indexOf("p") ));
var top= parseInt(this.style.top .indexOf("p")));
relativex=clientx-left;クライアントトップ;
index_z;
drganow=true;
element.onmouse=function(e) 🎜>{
var ev = window.event ||
//ドラッグ開始
if(dragbegin)
{
//div の相対位置を変更します
this .style.left= (ev.clientX-relativex) 'px';
this.style.top=(ev .clientY-relativey) 'px';
this.style.cursor='move'; 🎜>}
}
element.onmouseout=function(e)
{
isout= true;
}
element.onmouseup=function(e)
{
var ev = window.event || e;
if(dragbegin)
{
// div の相対位置を変更します
drganow.style.left= (ev.clientX-relativex) 'px';
drganow.style.top=(ev.clientY-relativey) 'px';
dragbegin=false; >}
}
}
})();


1. 後のメンテナンスを容易にするために、クロージャの形式で実装されます。 2. ドラッグ処理中にマウスの動きが速すぎて、移動要素がマウスの動きに追いつかないため、このスイッチの document.oumouseup イベントを登録する必要があります。イベントは、移動要素
の onmouseout イベントによってトリガーされます。 3. ブラウザー独自の onmousemove select イベントは、ドラッグ プロセス中にトリガーされる可能性がありますが、IE は onmousemove="document .selection.empty()" でブロックされる可能性があります。