、EventUtil.js
具体的に「を参照してくださいEventUtil--クロスブラウザイベントオブジェクト：」住所 https://www.cnblogs.com/hykun/p/EventUtil.html
有害事象は、{=ました
addHandler：機能（要素、種類、ハンドラ）{
//イベントを追加
IF（element.addEventListener）{
element.addEventListener（タイプ、ハンドラ、偽）//はDOM2レベルのアプローチを使用してイベントを追加します
}そうであれば（element.attachEvent）{
// IEの方法を使用してイベントを追加
element.attachEvent（ 'オン' +タイプ、ハンドラ）
}他{
[+型「に」]の要素は=ハンドラ// DOM0を使用して、イベントの規模メソッドを追加します
}
}、
removeHandler：機能（要素、種類、ハンドラ）{
//イベントをキャンセル
IF（element.removeEventListener）{
element.removeEventListener（タイプ、ハンドラ、偽）
}そうであれば（element.detachEvent）{
element.detachEvent（ 'オン' +タイプ、ハンドラ）
}他{
= NULL [+型 'に']要素
}
}、
GETEVENT：関数（イベント）{
//クロスブラウザイベントオブジェクトを取得するために、このメソッドを使用します
イベントを返しますか？イベント：window.event
}、
でgetTarget：関数（イベント）{
//実際の対象イベントを返します。
event.targetを返す|| event.srcElement
}、
でpreventDefault：関数（イベント）{
//イベントのデフォルトの動作を妨げます
IF（event.preventDefault）{
event.preventDefault（）
}他{
event.returnValue = falseを
}
}、
stopPropagation：関数（イベント）{
//すぐにDOMのイベントの広がりを止めます
上記のイベントハンドラに登録//回避トリガーdocument.body
IF（するevent.stopPropagation）{
するevent.stopPropagation（）
}他{
真= event.cancelBubble
}
}、
getRelatedTarget：関数（イベント）{
//マウスオーバーを取得し、関連する要素をマウスアウト
IF（event.relatedTarget）{
event.relatedTargetを返します
}そうであれば（event.toElement）{
//互換IE8-
event.toElementを返します
}そうであれば（event.formElement）{
event.formElementを返します
}他{
リターンはnull
}
}、
getButton：関数（イベント）{
//マウスダウンかのmouseUpボタンが押されたか、どのマウスにリリースされた取得します
IF（document.implementation.hasFeature（ 'のMouseEvents'、 '2.0'））{
event.buttonを返します
}他{
スイッチ（
DOMモデルのボタンの属性マッピングevent.buttonを// IEモデルは、ボタン属性
）{
ケース0：
ケース1：
ケース3：
ケース5：
ケース7：
返す0マウスの主ボタンが押される//（通常は左）
ケース2：
ケース6：
2 //押されたマウスの中ボタンを返します
ケース4：
リターン1つの//二次マウスボタン（通常右）
}
}
}、
getWheelDelta：関数（イベント）{
//マウスホイールのスクロール方向の値を取得
IF（event.wheelDelta）{
event.wheelDeltaを返します
}他{
40 * -event.detail戻ります
}
}、
getCharCode：関数（イベント）{
//クロスブラウザ、同じ文字エンコーディングを取得KeyPressイベントを使用します
IF（typeof演算event.charCode == '番号'）{
リターンevent.charCode
}他{
リターンevent.keyCode
}
}
}
第二に、カスタムイベント - CustomEvent.js
/ **
*カスタムイベント
* /
関数のEventTarget（）{
//ストアイベントハンドラ
this.handlers = {}
}
EventTarget.prototype = {
コンストラクタ：のEventTarget、
//イベントの特定のタイプにイベントハンドラを登録
addHandler：関数（種類、ハンドラ）{
IF（typeof演算のthis.handlers [タイプ] == '不定'）{
this.handlers [タイプ] = []
}
this.handlers [タイプ] .push（ハンドラ）
}、
//イベントをトリガするために使用
火災：関数（イベント）{
（もし！event.target）{
event.target =この
}
IF（this.handlers [event.type] instanceofのアレイ）{
VARハンドラの=のthis.handlers [event.type]
{（; iはLEN <I ++はVAR I = 0、LEN = handlers.length）のために
ハンドラ[I]（イベント）
}
}
}、
//イベントハンドラのイベントタイプのキャンセル
removeHandler：関数（種類、ハンドラ）{
IF（this.handlers [タイプ] instanceofのアレイ）{
VARハンドラー=のthis.handlers [タイプ]
{（; iはLEN <I ++はVAR I = 0、LEN = handlers.length）のために
もし（ハンドラ[I] ===ハンドラ）{
ブレーク
}
}
handlers.splice（I、1）
}
}
}
第三に、ドラッグ・アンド・イベント--- drag.jsをドロップ
VaRのドラッグアンドドロップ=（関数（）{
VaRのドラッグアンドドロップ=新しいのEventTarget（）、
ドラッグ= nullを、
diffX = 0、
diffY = 0
関数のhandleEvent（イベント）{
//イベントやオブジェクトを取得
イベント= EventUtil.getEvent（イベント）
VARターゲット= EventUtil.getTarget（イベント）
//イベントの種類を決定します
スイッチ（event.type）{
ケース「マウスダウン」：
IF（）target.className.indexOf（ 'ドラッグ'> -1）{
ドラッグ=ターゲット
diffX = event.clientX - target.offsetLeft
diffY = event.clientY - target.offsetTop
dragdrop.fire（{
タイプ：「はdragstart」
ターゲット：ドラッグ、
X：event.clientX、
Y：event.clientY
}）
}
ブレーク
ケース 'のMouseMove'：
場合（ドラッグ！== NULL）{
//場所を指定します
dragging.style.left = event.clientX - diffX + 'PX'
dragging.style.top = event.clientY - diffY + 'PX'
//カスタムイベントをトリガ
dragdrop.fire（{
タイプ：「ドラッグ」、
ターゲット：ドラッグ、
X：event.clientX、
Y：event.clientY
}）
}
ブレーク
ケース 'のmouseup'：
dragdrop.fire（{
タイプ：「ベアリング」
ターゲット：ドラッグ、
X：event.clientX、
Y：event.clientY
}）
ドラッグ= nullを
ブレーク
}
}
//パブリックインターフェイス
dragdrop.enable =関数（）{
EventUtil.addHandler（文書、 'マウスダウン' のhandleEvent）
EventUtil.addHandler（文書 'のMouseMove' のhandleEvent）
EventUtil.addHandler（文書 'のmouseup' のhandleEvent）
}
dragdrop.disable =関数（）{
EventUtil.removeHandler（文書、 'マウスダウン' のhandleEvent）
EventUtil.removeHandler（文書 'のMouseMove' のhandleEvent）
EventUtil.removeHandler（文書 'のmouseup' のhandleEvent）
}
ドラッグアンドドロップを返します
}）（）
四、htmlファイル
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<スクリプトSRC = "./ EventUtil.js"> </ SCRIPT>
<スクリプトSRC = "./ CustomEvent.js"> </ SCRIPT>
<スクリプトSRC = "./ drag.js"> </ SCRIPT>
<タイトル>ドキュメント</ TITLE>
<スタイル>
＃MyDiv1 {
位置：絶対;
幅：200pxの。
高さ：200pxの。
背景色：アクア;
}
＃myDiv2 {
位置：絶対;
幅：200pxの。
高さ：200pxの。
背景色：サーモン。
}
＃myDiv3 {
位置：絶対;
幅：200pxの。
高さ：200pxの。
背景色：slateblue。
}
</スタイル>
</ head>の
<身体>
<スクリプト>
//印刷コンソールのドロップ位置
DragDrop.addHandler（ "はdragstart"、関数（イベント）{
VARステータス=のdocument.getElementById（ "ステータス"）;
console.log（+ event.target.idを "ドラッグ開始"）。
}）;
DragDrop.addHandler（ "ドラッグ"、関数（イベント）{
VARステータス=のdocument.getElementById（ "ステータス"）;
console.log（+ event.x + "（に" + event.target.id + "<BR/>がドラッグ"
"" + event.y + "）"）;
}）;
DragDrop.addHandler（ "dragendイベント"、関数（イベント）{
VARステータス=のdocument.getElementById（ "ステータス"）;
console.log（+ event.x + "（で" + event.target.id + "<BR/>はドロップ"
"" + event.y + "）"）;
}）;
//読み込みドラッグアンドドロップイベント
DragDrop.enable（）
</ SCRIPT>
<PのID = "ステータス"> </ P>
<DIV ID = "myDiv1" クラス= "ドラッグ"> </ div>
<DIV ID = "myDiv2" クラス= "ドラッグ"> </ div>
<DIV ID = "myDiv3" クラス= "ドラッグ"> </ div>
</ BODY>
</ HTML>