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/

2 comments:

  1. Hi! I can see that you used some buttons examples with css on your blog article. Really impressive work indeed. When it comes to buttons, I usually combined CSS and javascript as well. I often used css generators like http://www.generatecss.com/. There is a button section in there, http://www.generatecss.com/advanced/button/. Thanks for sharing this again!

    ReplyDelete

ShareThis