WEB API Archives - icodebroker

[JAVASCRIPT/WEB API] 웹 SQL 데이터베이스에서 데이터베이스 버전 업그레이드하기

■ 웹 SQL 데이터베이스에서 데이터베이스 버전을 업그레이드하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var db;

            var sqlArray =
            [
                'create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))', // 버전 1
                'alter table phonebook add column gender char',                                                       // 버전 2
                'alter table phonebook add column company varchar(64)'                                                // 버전 3
            ];

            function onLoad()
            {
                try
                {
                    this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);
                }
                catch(e)
                {
                    document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

                    return;
                }

                document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';
            }

            function showVersion()
            {
                document.getElementById('output').innerHTML = "현재 데이터베이스 버전 : " + this.db.version;
            }

            function upgradeVersion()
            {
                var message = '';
                var version = eval('0' + this.db.version);

                if(version < this.sqlArray.length)
                {
                    this.db.changeVersion
                    (
                        this.db.version,
                        String(this.sqlArray.length),
                        function(tx)
                        {
                            for(var i = version; i < this.sqlArray.length; i++)
                            {
                                tx.executeSql(this.sqlArray[i]);

                                message += 'version ' + (i + 1) + '로 업그레이드하였습니다.<br />';
                            }

                            document.getElementById('output').innerHTML = message;
                        }
                    );
                }
                else
                {
                    document.getElementById('output').innerHTML = '현재 버전(' + version + ')이 최종 버전입니다.';
                }
            }

            function resetVersion()
            {
                this.db.changeVersion
                (
                    this.db.version,
                    '',
                    function(tx)
                    {
                        tx.executeSql('drop table phonebook');
                    }
                );

                document.getElementById('output').innerHTML = '데이터베이스를 초기 상태로 설정했습니다.';
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="output">데이터베이스 테스트입니다.</div>
        <p />
        <input type="button" value="현재 버전 조회"  onclick="showVersion();"    />
        <input type="button" value="버전 업그레이드" onclick="upgradeVersion();" />
        <input type="button" value="버전 초기화"     onclick="resetVersion();"   />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var db;

var sqlArray =

[

'create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))', // 버전 1

'alter table phonebook add column gender char', // 버전 2

'alter table phonebook add column company varchar(64)' // 버전 3

];

function onLoad()

{

try

{

this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);

}

catch(e)

{

document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

return;

}

document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';

}

function showVersion()

{

document.getElementById('output').innerHTML = "현재 데이터베이스 버전 : " + this.db.version;

}

function upgradeVersion()

{

var message = '';

var version = eval('0' + this.db.version);

if(version < this.sqlArray.length)

{

this.db.changeVersion

(

this.db.version,

String(this.sqlArray.length),

function(tx)

{

for(var i = version; i < this.sqlArray.length; i++)

{

tx.executeSql(this.sqlArray[i]);

message += 'version ' + (i + 1) + '로 업그레이드하였습니다.<br />';

}

document.getElementById('output').innerHTML = message;

}

);

}

else

{

document.getElementById('output').innerHTML = '현재 버전(' + version + ')이 최종 버전입니다.';

}

function resetVersion()

{

this.db.changeVersion

(

this.db.version,

'',

function(tx)

{

tx.executeSql('drop table phonebook');

}

);

document.getElementById('output').innerHTML = '데이터베이스를 초기 상태로 설정했습니다.';

}

</script>

</head>

<div id="output">데이터베이스 테스트입니다.</div>

<p />

</body>

</html>

[JAVASCRIPT/WEB API] 웹 SQL 데이터베이스에서 테이블 데이터 추가/삭제/조회하기

■ 웹 SQL 데이터베이스에서 테이블 데이터를 추가/삭제/조회하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var db;

            function onLoad()
            {
                try
                {
                    this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);
                }
                catch(e)
                {
                    document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

                    return;
                }

                document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';
            }

            function createCallback(tx)
            {
                tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');
            }

            function errorCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';
            }

            function successCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블을 생성했습니다.';
            }

            function createTable()
            {
                this.db.transaction(createCallback, errorCallback, successCallback);
            }

            function dropTable()
            {
                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('drop table phonebook');

                        document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';
                    }
                );
            }

            function insertData()
            {
                var name  = document.getElementById('name' ).value;
                var phone = document.getElementById('phone').value;

                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('insert into phonebook (name, phone) values (?, ?)', [name, phone]);
                    }
                );

                document.getElementById('output').innerHTML = '데이터를 추가했습니다.';

                document.getElementById('name' ).value = '';
                document.getElementById('phone').value = '';
            }

            function removeData(id)
            {
                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('delete from phonebook where id = ?', [id]);
                    }
                );

                document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';
            }

            function showData()
            {
                var message = '';

                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql
                        (
                            'select * from phonebook',
                            [],
                            function(tx, rs)
                            {
                                for(var i = 0; i < rs.rows.length; i++)
                                {
                                    var row = rs.rows.item(i);

                                    message = message + row['name'] + ', ' + row['phone'] + ', ' + '<a href="javascript:removeData(' + row['id'] + ');">삭제</a><br />';
                                }

                                document.getElementById('output').innerHTML = message;
                            }
                        );
                    }
                );
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="output">데이터베이스 테스트입니다.</div>
        <p />
        <input type="button" value="테이블 생성" onclick="createTable();" />
        <input type="button" value="테이블 삭제" onclick="dropTable();"   />
        <p />
        이름 : <input type="text" id="name"  size="10" />
        전화 : <input type="text" id="phone" size="10" />
        <input type="button" value="데이터 추가" onclick="insertData();" />
        <input type="button" value="데이터 조회" onclick="showData();"   />
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<!DOCTYPE html>

<html>

<head>

var db;

function onLoad()

{

try

{

this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);

}

catch(e)

{

document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

return;

}

document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';

}

function createCallback(tx)

{

tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');

}

function errorCallback(tx)

{

document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';

}

function successCallback(tx)

{

document.getElementById('output').innerHTML = '테이블을 생성했습니다.';

}

function createTable()

{

this.db.transaction(createCallback, errorCallback, successCallback);

}

function dropTable()

{

this.db.transaction

(

function(tx)

{

tx.executeSql('drop table phonebook');

document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';

}

);

}

function insertData()

{

var name = document.getElementById('name' ).value;

var phone = document.getElementById('phone').value;

this.db.transaction

(

function(tx)

{

tx.executeSql('insert into phonebook (name, phone) values (?, ?)', [name, phone]);

}

);

document.getElementById('output').innerHTML = '데이터를 추가했습니다.';

document.getElementById('name' ).value = '';

document.getElementById('phone').value = '';

}

function removeData(id)

{

this.db.transaction

(

function(tx)

{

tx.executeSql('delete from phonebook where id = ?', [id]);

}

);

document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';

}

function showData()

{

var message = '';

this.db.transaction

(

function(tx)

{

tx.executeSql

(

'select * from phonebook',

[],

function(tx, rs)

{

for(var i = 0; i < rs.rows.length; i++)

{

var row = rs.rows.item(i);

message = message + row['name'] + ', ' + row['phone'] + ', ' + '<a href="javascript:removeData(' + row['id'] + ');">삭제</a><br />';

}

document.getElementById('output').innerHTML = message;

}

);

}

);

}

</script>

</head>

<div id="output">데이터베이스 테스트입니다.</div>

<p />

<p />

이름 : <input type="text" id="name" size="10" />

전화 : <input type="text" id="phone" size="10" />

</body>

</html>

[JAVASCRIPT/WEB API] 웹 SQL 데이터베이스에서 테이블 생성/삭제하기

■ 웹 SQL 데이터베이스에서 테이블을 생성하고 삭제하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var db;

            function onLoad()
            {
                try
                {
                    this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);
                }
                catch(e)
                {
                    document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

                    return;
                }

                document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';
            }

            function createCallback(tx)
            {
                tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');
            }

            function errorCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';
            }

            function successCallback(tx)
            {
                document.getElementById('output').innerHTML = '테이블을 생성했습니다.';
            }

            function createTable()
            {
                this.db.transaction(createCallback, errorCallback, successCallback);
            }

            function dropTable()
            {
                this.db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql('drop table phonebook');

                        document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';
                    }
                );
            }
</script>
    </head>
    <body onload="onLoad();">
        <div id="output">데이터베이스 테스트입니다.</div>
        <p />
        <input type="button" value="테이블 생성" onclick="createTable();" />
        <input type="button" value="테이블 삭제" onclick="dropTable();"   />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var db;

function onLoad()

{

try

{

this.db = openDatabase('html5', '1', '전화번호부', 1024 * 1024);

}

catch(e)

{

document.getElementById('output').innerHTML = '데이터베이스를 여는 중 에러가 발생했습니다 : ' + e;

return;

}

document.getElementById('output').innerHTML = '데이터베이스를 열었습니다.';

}

function createCallback(tx)

{

tx.executeSql('create table phonebook (id integer primary key autoincrement, name varchar(32), phone varchar(32))');

}

function errorCallback(tx)

{

document.getElementById('output').innerHTML = '테이블 생성시 에러가 발생했습니다.';

}

function successCallback(tx)

{

document.getElementById('output').innerHTML = '테이블을 생성했습니다.';

}

function createTable()

{

this.db.transaction(createCallback, errorCallback, successCallback);

}

function dropTable()

{

this.db.transaction

(

function(tx)

{

tx.executeSql('drop table phonebook');

document.getElementById('output').innerHTML = '테이블을 삭제했습니다.';

}

);

}

</script>

</head>

<div id="output">데이터베이스 테스트입니다.</div>

<p />

</body>

</html>

[JAVASCRIPT/WEB API] Storage 인터페이스 : 세션 저장소 데이터 처리하기

■ Storage 인터페이스를 사용해 세션 저장소 데이터를 처리하는 방법을 보여준다. ▶ test1.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var data;

            function saveData()
            {
                data                = 'html5';
                sessionStorage.data = 'html5';
                localStorage.data   = 'html5';

                document.getElementById('output').innerHTML = '데이터를 저장했습니다.';
            }

            function loadData()
            {
                message =           '자바 스크립트 변수 : ' + data                           + '<br />';
                message = message + '세션 저장소 변수 : '   + sessionStorage.getItem('data') + '<br />';
                message = message + '로컬 저장소 변수 : '   + localStorage.getItem('data');

                document.getElementById('output').innerHTML = message;
            }

            function goToNextPage()
            {
                location.href = 'test2.html';
            }

            function clearData()
            {
                data = '';

                sessionStorage.clear();
                localStorage.clear();

                document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';
            }
        </script>
    </head>
    <body>
        <div id="output">세션 저장소 테스트입니다.</div>
        <p />
        <input type="button" value="데이터 저장" onclick="saveData();"     />
        <input type="button" value="데이터 로드" onclick="loadData();"     />
        <input type="button" value="페이지 이동" onclick="goToNextPage();" />
        <input type="button" value="데이터 삭제" onclick="clearData();"    />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var data;

function saveData()

{

data = 'html5';

sessionStorage.data = 'html5';

localStorage.data = 'html5';

document.getElementById('output').innerHTML = '데이터를 저장했습니다.';

}

function loadData()

{

message = '자바 스크립트 변수 : ' + data + '<br />';

message = message + '세션 저장소 변수 : ' + sessionStorage.getItem('data') + '<br />';

message = message + '로컬 저장소 변수 : ' + localStorage.getItem('data');

document.getElementById('output').innerHTML = message;

}

function goToNextPage()

{

location.href = 'test2.html';

}

function clearData()

{

data = '';

sessionStorage.clear();

localStorage.clear();

document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';

}

</script>

</head>

<body>

<div id="output">세션 저장소 테스트입니다.</div>

<p />

</body>

</html>

▶ test2.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <a href="test1.html">이전 페이지로 이동</a>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

[JAVASCRIPT/WEB API] Storage 인터페이스 : 로컬 저장소에서 JSON 데이터 처리하기

■ Storage 인터페이스를 사용해 로컬 저장소에서 JSON 데이터를 처리하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var array = JSON.parse(localStorage.getItem('phonebook'));

                if(array == null)
                {
                    localStorage.setItem('phonebook', JSON.stringify(new Array));
                }

                showData();
            }

            function showData()
            {
                var message = '';

                var array = JSON.parse(localStorage.getItem('phonebook'));

                for(var i = 0; i < array.length; i++)
                {
                    message = message + array[i].name + ', ' + array[i].phone + ', ' + '<a href="javascript:removeData(' + i + ');">삭제</a><br />';
                }

                document.getElementById('output').innerHTML = message;
            }

            function AddData()
            {
                var value1;
                var value2;
                var array = JSON.parse(localStorage.getItem('phonebook'));

                value1 = document.getElementById('name').value;
                value2 = document.getElementById('phone').value;

                array[array.length] = { name : value1, phone : value2 };

                localStorage.setItem('phonebook', JSON.stringify(array));

                showData();

                document.getElementById('name').value  = '';
                document.getElementById('phone').value = '';
            }

            function removeData(i)
            {
                var array = JSON.parse(localStorage.getItem('phonebook'));

                array.splice(i, 1);

                localStorage.setItem('phonebook', JSON.stringify(array));

                showData();
            }

            function clearData()
            {
                localStorage.removeItem('phonebook');

                localStorage.setItem('phonebook', JSON.stringify(new Array));

                showData();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="output">로컬 저장소 JSON 데이터 테스트입니다.</div>
        <p />
        <input id="name" type="text" size="8" />
        <input id="phone" type="text" size="12" />
        <p />
        <input type="button" value="데이터 추가" onclick="AddData();"   />
        <input type="button" value="데이터 삭제" onclick="clearData();" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var array = JSON.parse(localStorage.getItem('phonebook'));

if(array == null)

{

localStorage.setItem('phonebook', JSON.stringify(new Array));

}

showData();

}

function showData()

{

var message = '';

var array = JSON.parse(localStorage.getItem('phonebook'));

for(var i = 0; i < array.length; i++)

{

message = message + array[i].name + ', ' + array[i].phone + ', ' + '<a href="javascript:removeData(' + i + ');">삭제</a><br />';

}

document.getElementById('output').innerHTML = message;

}

function AddData()

{

var value1;

var value2;

var array = JSON.parse(localStorage.getItem('phonebook'));

value1 = document.getElementById('name').value;

value2 = document.getElementById('phone').value;

array[array.length] = { name : value1, phone : value2 };

localStorage.setItem('phonebook', JSON.stringify(array));

showData();

document.getElementById('name').value = '';

document.getElementById('phone').value = '';

}

function removeData(i)

{

var array = JSON.parse(localStorage.getItem('phonebook'));

array.splice(i, 1);

localStorage.setItem('phonebook', JSON.stringify(array));

showData();

}

function clearData()

{

localStorage.removeItem('phonebook');

localStorage.setItem('phonebook', JSON.stringify(new Array));

showData();

}

</script>

</head>

<div id="output">로컬 저장소 JSON 데이터 테스트입니다.</div>

<p />

<p />

</body>

</html>

[JAVASCRIPT/WEB API] Storage 인터페이스 : 로컬 저장소 데이터 처리하기

■ Storage 인터페이스를 사용해 로컬 저장소의 데이터를 처리하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function saveData()
            {
                localStorage.name = 'html5';
                localStorage['phone'] = '012-3456-7890';
                localStorage.setItem('email', 'someone@html5.com');

                document.getElementById('output').innerHTML = '로컬 저장소에 데이터가 저장되었습니다.';
            }

            function loadData()
            {
                message = '이름 : ' + localStorage['name'] + '<br />';
                message = message + '전화 : ' + localStorage.getItem('phone') + '<br />';
                message = message + '이메일 : ' + localStorage.email;

                document.getElementById('output').innerHTML = message;
            }

            function clearData()
            {
                localStorage.clear();

                document.getElementById('output').innerHTML = '로컬 저장소의 데이터가 모두 제거되었습니다.';
            }
        </script>
    </head>
    <body>
        <div id="output">로컬 저장소 테스트입니다.</div>
        <p />
        <input type="button" value="저장하기" onclick="saveData();"  />
        <input type="button" value="로드하기" onclick="loadData();"  />
        <input type="button" value="지우기"   onclick="clearData();" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function saveData()

{

localStorage.name = 'html5';

localStorage['phone'] = '012-3456-7890';

localStorage.setItem('email', 'someone@html5.com');

document.getElementById('output').innerHTML = '로컬 저장소에 데이터가 저장되었습니다.';

}

function loadData()

{

message = '이름 : ' + localStorage['name'] + '<br />';

message = message + '전화 : ' + localStorage.getItem('phone') + '<br />';

message = message + '이메일 : ' + localStorage.email;

document.getElementById('output').innerHTML = message;

}

function clearData()

{

localStorage.clear();

document.getElementById('output').innerHTML = '로컬 저장소의 데이터가 모두 제거되었습니다.';

}

</script>

</head>

<body>

<div id="output">로컬 저장소 테스트입니다.</div>

<p />

</body>

</html>

[JAVASCRIPT/WEB API] HTMLCanvasElement 인터페이스 : getContext 메소드를 사용해 컨텍스트 구하기

■ HTMLCanvasElement 인터페이스의 getContext 메소드를 사용해 컨텍스트를 구하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.strokeStyle = 'red';

context.strokeRect(20, 20, 100, 100);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(120, 120, 200, 200);

context.clearRect(140, 140, 160, 160);

}

</script>

</head>

</body>

</html>

[JAVASCRIPT/WEB API] Document 인터페이스 : getElementById 메소드를 사용해 ID로 엘리먼트 구하기

■ Document 인터페이스의 getElementById 메소드를 사용해 ID로 엘리먼트를 구하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.strokeStyle = 'red';

context.strokeRect(20, 20, 100, 100);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(120, 120, 200, 200);

context.clearRect(140, 140, 160, 160);

}

</script>

</head>

</body>

</html>

[JAVASCRIPT/WEB API] 드래그 & 드롭 사용하기

■ 드래그 & 드롭을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        #board
        {
            position     : absolute;
            width        : 400px;
            height       : 400px;
            border-style : solid;
        }
    </style>
    <script language="javascript">
        var minimumX = 0;
        var minimumY = 0;
        var baseX    = 0;
        var baseY    = 0;

        function onDragStart(event)
        {
            var targetElement;

            if(typeof event.target != 'undefined')
            {
                targetElement = event.target;
            }
            else
            {
                targetElement = event.srcElement;
            }

            if(targetElement.tagName.toLowerCase() == 'img')
            {
                event.dataTransfer.setData('text', targetElement.id);
            }
        }

        function onDragEnter(event)
        {
            if(event.dataTransfer.dropEffect == 'copy')
            {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }
        }

        function onDragOver(event)
        {
            event.dataTransfer.dropEffect = 'copy';

            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }

        function onDrop(event)
        {
            var id          = event.dataTransfer.getData('text');
            var dropElement = document.getElementById(id);

            var targetElement;

            if(typeof event.currentTarget != 'undefined')
            {
                targetElement = event.currentTarget;
            }
            else
            {
                targetElement = event.srcElement;
            }

            if(dropElement && dropElement.parentNode != targetElement)
            {
                var cloneElement = dropElement.cloneNode();

                targetElement.appendChild(cloneElement);

                var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;
                var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

                var x = window.event.clientX + scrollX;
                var y = window.event.clientY + scrollY;

                setPosition(x, y);

                cloneElement.style.position = 'absolute';
                cloneElement.style.left     = (this.minimumX - cloneElement.width  / 2 - this.baseX) + 'px';
                cloneElement.style.top      = (this.minimumY - cloneElement.height / 2 - this.baseY) + 'px';
            }

            event.stopPropagation ? event.stopPropagation() : event.returnValue = false;
        }

        function setPosition(sourceX, sourceY)
        {
            var minimumDistance = 100000;

            for(var i = 1; i <= 4; i++)
            {
                for(var j = 1; j <= 4; j++)
                {
                    var x = 80 * i + baseX;
                    var y = 80 * j + baseY;

                    var distance = Math.sqrt((sourceX - x) * (sourceX - x) + (sourceY - y) * (sourceY - y));

                    if(distance < minimumDistance)
                    {
                        minimumDistance = distance;

                        this.minimumX = x;
                        this.minimumY = y;
                    }
                }
            }
        }

        function onLoad()
        {
            var canvas = document.getElementById('canvas');

            if(canvas.getContext)
            {
                var context = canvas.getContext('2d');

                context.lineWidth   = 2;
                context.lineJoin    = 'miter';
                context.lineCap     = 'butt';
                context.strokeStyle = 'gray';

                for(i = 1; i <= 5; i++)
                {
                    context.beginPath();
                    context.moveTo(0, 80 * i);
                    context.lineTo(400, 80 * i);

                    context.moveTo(80 * i, 0);
                    context.lineTo(80 * i, 400);
                    context.stroke();
                }
            }

            var board = document.getElementById('board');

            var x = board.style.left.replace('px', '');
            var y = board.style.top.replace('px', '');

            var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;
            var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

            this.baseX = parseInt(x) + parseInt(scrollX);
            this.baseY = parseInt(y) + parseInt(scrollY);
        }
    </script>
    <body onload="onLoad();">
        <div onDragStart="onDragStart(event)" draggable="true">
            <img id="image1" src="ball_blue.png" />
            <img id="image2" src="ball_red.png"  />
        </div>
        <div id="board" style="left:10px;top:100px;"
            ondragEnter="onDragEnter(event)"
            onDragOver="onDragOver(event)"
            onDrop="onDrop(event)">
            <canvas id="canvas" width="400" height="400" />
        </div>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

<!DOCTYPE html>

<html>

<head>

</head>

<style>

#board

{

position : absolute;

width : 400px;

height : 400px;

border-style : solid;

}

</style>

var minimumX = 0;

var minimumY = 0;

var baseX = 0;

var baseY = 0;

function onDragStart(event)

{

var targetElement;

if(typeof event.target != 'undefined')

{

targetElement = event.target;

}

else

{

targetElement = event.srcElement;

}

if(targetElement.tagName.toLowerCase() == 'img')

{

event.dataTransfer.setData('text', targetElement.id);

}

function onDragEnter(event)

{

if(event.dataTransfer.dropEffect == 'copy')

{

event.preventDefault ? event.preventDefault() : event.returnValue = false;

}

function onDragOver(event)

{

event.dataTransfer.dropEffect = 'copy';

event.preventDefault ? event.preventDefault() : event.returnValue = false;

}

function onDrop(event)

{

var id = event.dataTransfer.getData('text');

var dropElement = document.getElementById(id);

var targetElement;

if(typeof event.currentTarget != 'undefined')

{

targetElement = event.currentTarget;

}

else

{

targetElement = event.srcElement;

}

if(dropElement && dropElement.parentNode != targetElement)

{

var cloneElement = dropElement.cloneNode();

targetElement.appendChild(cloneElement);

var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;

var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

var x = window.event.clientX + scrollX;

var y = window.event.clientY + scrollY;

setPosition(x, y);

cloneElement.style.position = 'absolute';

cloneElement.style.left = (this.minimumX - cloneElement.width / 2 - this.baseX) + 'px';

cloneElement.style.top = (this.minimumY - cloneElement.height / 2 - this.baseY) + 'px';

}

event.stopPropagation ? event.stopPropagation() : event.returnValue = false;

}

function setPosition(sourceX, sourceY)

{

var minimumDistance = 100000;

for(var i = 1; i <= 4; i++)

{

for(var j = 1; j <= 4; j++)

{

var x = 80 * i + baseX;

var y = 80 * j + baseY;

var distance = Math.sqrt((sourceX - x) * (sourceX - x) + (sourceY - y) * (sourceY - y));

if(distance < minimumDistance)

{

minimumDistance = distance;

this.minimumX = x;

this.minimumY = y;

}

function onLoad()

{

var canvas = document.getElementById('canvas');

if(canvas.getContext)

{

var context = canvas.getContext('2d');

context.lineWidth = 2;

context.lineJoin = 'miter';

context.lineCap = 'butt';

context.strokeStyle = 'gray';

for(i = 1; i <= 5; i++)

{

context.beginPath();

context.moveTo(0, 80 * i);

context.lineTo(400, 80 * i);

context.moveTo(80 * i, 0);

context.lineTo(80 * i, 400);

context.stroke();

}

var board = document.getElementById('board');

var x = board.style.left.replace('px', '');

var y = board.style.top.replace('px', '');

var scrollX = window.scrollX ? window.scrollX : document.body.scrollLeft;

var scrollY = window.scrollY ? window.scrollY : document.body.scrollTop;

this.baseX = parseInt(x) + parseInt(scrollX);

this.baseY = parseInt(y) + parseInt(scrollY);

}

</script>

</div>

<div id="board" style="left:10px;top:100px;"

ondragEnter="onDragEnter(event)"

onDragOver="onDragOver(event)"

onDrop="onDrop(event)">

</div>

</body>

</html>