Sunday, June 24, 2012

First try on HTML 5 . :) :) Awesome experience :)


Here, I have implemented a simple drag and drop in action. J  . I’ll de­fine a drag­gable image that can be dropped into a circle.


The Complete source code ::

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Basic drag and drop example</title>
    <style>

        .drop-div {
            width: 150px;
            height: 150px;
            border: 3px dashed #224163;
            background-color: #AABACC;
            margin-top: 15px;
            border-radius: 80px;
            text-align: center;
        }

        [draggable=true] {
            -khtml-user-drag: element;
            -webkit-user-drag: element;
            -khtml-user-select: none;
            -webkit-user-select: none;
            cursor: pointer;
            margin-top: 50px;
        }
    </style>
    <script>

        function dragStartHandler(event) {
            event.dataTransfer.setData('Text', 'text');
        }
        function dropHandler(event) {
            preventDefaults(event);
            if (!event.target) {
                event.target = event.srcElement
            }
            event.target.appendChild(document.getElementById('draggable-img'));
        }
        function dragOverHandler(event) {
            preventDefaults(event);
        }

        function preventDefaults(event) {
            if (event.preventDefault) {
                event.preventDefault();
            }

            try {
                event.returnValue = false;
            }
            catch (exception) {}
        }
    </script>
</head>

<body>

<img draggable="true"
     ondragstart="dragStartHandler(event);"
     class="draggable-img"
     id="draggable-img"
     src="C:\Users\Dipayan\Desktop\ball.png "/>
<div class="drop-div"
     ondragover="dragOverHandler(event);"
     ondrop="dropHandler(event)"
     id="drop-div"></div>

</body>
</html>


What It Looks Like


















You can then click on the red ball , drag the ball to in­side the circle, and drop it to pro­duce this: