Make Code Easy

Saturday, June 28, 2014

Drag and Drop using jQuery JavaScript in HTML

Using jQuery you can create simple Drag & Drop features easily and manage them well. jQuery UI provides with a vast suite of APIs that can create a UI with Drag Drop functionality.
Steps :-

1. Create a HTML file which includes css, jquery & javascript libraries .


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop</title>

<LINK REL=StyleSheet HREF="css/makecodeeasy.css" TYPE="text/css">
<link rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>
<body>

    <div>
        <fieldset id="shop" class="draggableContainer">
            <legend>Draggable component</legend>
            <img class="component" id="1" src="image/1.jpg"> 
            <img class="component" id="2" src="image/2.jpg"> 
            <img class="component" id="3" src="image/3.jpg"> 
            <img class="component" id="4" src="image/4.jpg">
        </fieldset>
    </div>

    <div>
        <fieldset>
            <legend>dropZone</legend>
            <div class="dropZone" id="dropZone"></div>
        </fieldset>
    </div>

    <script src="js/makecodeeasy.js"></script>

</body>
</html>

2. Create Javascript file (makecodeeasy.js)

var dropArea = document.querySelector('#dropZone');

var conponents = document.querySelectorAll('.component');
for ( var i = 0; i < conponents.length; i++) {
    conponents[i].setAttribute('draggable', 'true');
    conponents[i].addEventListener('dragstart', function(evnt) {
        evnt.dataTransfer.effectAllowed = 'copy';
        evnt.dataTransfer.setData('text', this.id);
        return false;
    }, false);
}

dropArea.addEventListener('dragover', function(evnt) {
    if (evnt.preventDefault)
        evnt.preventDefault();
    evnt.dataTransfer.dropEffect = 'copy';
    return false;
}, false);


dropArea.addEventListener('drop', function(evnt) {
    if (evnt.stopPropagation)
        evnt.stopPropagation();
    var id = evnt.dataTransfer.getData('text');
    var theitem = document.getElementById(id);

    if (theitem == null) {
        evnt.preventDefault();
        return;
    }
    var y = document.createElement('img');
    y.src = theitem.src;
    dropArea.appendChild(y);
    evnt.preventDefault(); // for Firefox
    return false;
}, false);

3. Create css file (makecodeeasy.css)

body {
    padding: 40px;
}

.draggableContainer {
    border-radius: 6px;
}


.component {
    border: 3px solid white;
}

.component:hover {
    border: 3px solid red;
    cursor: move;
}

#dropArea {
    position: relative;
    height: 200px;
    width: 100%;
    float: left;
    border: 1px dotted #999;
}


.dropZone {
    width:100%;
    height:100px
}

4. Demo

Draggable component

dropZone

5. Try the code & Enjoy :)
jsfiddle link :- http://jsfiddle.net/zBhD7/

Saturday, October 5, 2013

Amazing Light - Beautiful piece of art

Brick laying machine

Tiger-Stone, the amazing machine can create an instant road wherever it travels, laying out bricks in formation to create perfect paving. Its secret lies in a smartly designed gravity-based system.

Virtual wall concept to protect pedestrians

Pedestrian/motor vehicle crashes are a serious problem throughout the world and the India has a particular problem with pedestrian deaths and injuries.
Almost two-thirds of the 1.2 million people killed annually in road traffic crashes worldwide are pedestrians.

The sequence of events in a car-pedestrian accident

Traffic accidents are among the major causes of death in India. Every year increased the pedestrian accidents at pedestrian crossing zone. And I thought that crossing zone is sharing space between pedestrian and driver. But drivers are never care which pedestrian’ safety in the real world. Even drivers are sometimes switching to pedestrian. And nowadays, urban sites got the problem that disturbance of traffic signal. We are surrounded such a crazy commercials and crowd environment near the road space.

That’s a one of reason that many drivers losing attention and difficulty of awareness into traffic signal. And, I’d like to make wall up on the car’ stop line at the moment. Virtual Wall, It’s really effective in driver awareness. Because Virtual Wall can get bigger image and better look.

the inventor of this concept is Hanyoung Lee, got awarded for this creation work. this can be implemented in all zones for a better safety of pedestrians the concept work like this : at the junctions some two poles are fixed and when the pedestrians crossing the road these poles produces some rays which are visible to naked eye looks like a wall infront of them so this will gives more safety for the pedestrians.

Saturday, September 21, 2013

An Engineering Student

Resume tips!

Sunday, September 15, 2013

Android in alphabetic order

Android in alphabetic order.. c, d, e, f, g, h, i, j and next k