[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>