前編からの続き。
後編では、実際にドラッグ＆ドロップのプログラムを作ってみる。
一応、jQueryを使う前提で。
ソースコード
ドラッグ機能を有効にするスクリプト。
var g = g || {};
g.ui = g.ui || {};
/**
* @public
* @constructor
* @class
*/
g.ui.Draggable = function (element) {
this.element = element;
this.cloneNode = null;
this.initialize();
};
/**
* フラグとして利用する static 変数
*/
g.ui.Draggable.source = null;
/**
* 初期化処理
*/
g.ui.Draggable.prototype.initial ...
11月 2012年
任意のDOM要素同士 を ドラッグ&ドロップ（前編）
HTML5のドラッグ＆ドロップとはちょっと違う…
HTMLの任意DOM要素同士でドラッグ＆ドロップしたいんだよね。。
どのイベント使っていいかわからないから、とりあえず「前編」として調査です。
ブラウザ別イベントの発生順序
次のような状況（プログラム）を想定して、IE、Chr(Chrome)、FF(FireFox)において
どのような順序でイベントが発生するか調査してみた。
とりあえず、一通りのイベントをドラッグ対象となる任意のDOM要素(source)に追加。
とりあえず、一通りのイベントをドロップ先となる任意のDOM要素(target)に追加。
ドラッグ対象となる任意のDOM要素(source)を mousedown
mousedown された 任意のDOM要素(source) のクローン(clone)を作成
作成したクローン(clone)を body 末尾へ ...
Akinari Tsugo
18:24
JavaScript
クロスブラウザでイベントの追加、削除
javascriptで基本となる「イベントの追加、削除」処理。
ソースコード
var g = g || {};
g.event = g.event || {};
/**
* 指定した要素にイベントを追加します。
*
* @public
* @param {DOMElement} element イベントを追加したいDOM要素
* @param {string} type イベント種類
* @param {function} handler コールバック関数
*/
g.event.addEventHandler = function (element, type, handler) {
var actual;
// ブラウザに応じて使える関数を選択
if (wind ...
Akinari Tsugo
11:57
JavaScript