Drag and Drop

Drag and Drop Same Countries :

North-Amrica

South-America

Asia-

Oceania

COUNTRIES

South America

North America

Asia

Ocenia

submit
reset

South America : #6085EF
North America : #F06083
Asia : #61DE76
Ocenia : #EDA93C

code goes here :
step 1 : copy and paste below code in notepad and save as example.html
step 2 : open it in browser.
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
/*body {
    background:url("http://www.featurepics.com/FI/Thumb300/20061106/Green-Grass-Landscape-130779.jpg") repeat scroll 0 0 #666;} */
#wrapermain{   }
h1{ color:#639FDC;}
#wraper{ height: 320px;
    margin: 0 auto;
    width: 625px; }
#wraper-left{ background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/World_Map_Icon.svg/471px-World_Map_Icon.svg.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 300px;
    width: 500px;}
#wraper-right{ float: left;
    height: 250px;
    width: 120px; }
#wraper-right-btn{
font-weight: bold;
    height: 40px;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    width: 150px;
}
#wraper-right-btn ul li { float:left; list-style:none; float:left; padding:5px; }
#show/hide{ display: block; height: 85px; width: 170px; z-index: 10; }
#onlineusers{
color: #639FDC;
    font-weight: bold;
    height: 190px;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    width: 120px;
}
.friends {
font-weight: bold;
    height: 82px;
    left: 41px;
    position: relative;
    top: 48px;
    width: 170px;
}
.friends-2 {
    font-weight: bold;
    height: 57px;
    left: 229px;
    position: absolute;
    top: 100px;
    width: 137px;
}
.others {
     font-weight: bold;
    height: 78px;
    left: 190px;
    position: relative;
    top: 0;
    width: 105px;
}
.others-2 {
   font-weight: bold;
    height: 56px;
    left: 68px;
    position: absolute;
    top: 175px;
    width: 110px;
}
.user {
border: 2px solid;
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 110px;
}
#user1{
background-color:#FFF;
   cursor: move;
   color:#333333;
}
#user2
{
background-color:#FFF;
   cursor: move;
   color:#333333;
}
#user3
{
background-color:#FFF;
   cursor: move;
   color:#333333;
}
#user4
{
background-color:#FFF;
   cursor: move;
   color:#333333;
}
div#wraper-right-btn input#button1{
background: url("http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_20.png") no-repeat scroll 0 0 transparent;
    border: medium none;
    cursor: pointer;
    height: 35px;
    width: 40px;
}
div#wraper-right-btn input#button2{
background: url("http://png-1.findicons.com/files/icons/2222/gloss_basic/32/arrow_undo.png") no-repeat scroll 0 0 transparent;
    border: medium none;
    cursor: pointer;
    height: 35px;
    width: 40px;
}
</style>
</head>

<body>
   <div id="wrapermain">


<div id="wraper">
<p><h1>Drag and Drop Same Countries :</h1></p>

<div id="wraper-left">

    <div id="friends" class="friends" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">North-Amrica</div>

<div id="friends" class="friends-2" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">South-America</div>

    <div id="others" class="others" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">Asia-</div>

    <div id="others" class="others-2" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">Oceania</div>

</div>
<div id="wraper-right">

<div id="onlineusers" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">COUNTRIES

<div draggable="true" id="user1" class="user" ondragstart="drag(this, event)">South America</div>

<div draggable="true" id="user2" class="user" ondragstart="drag(this, event)">North America</div>

<div draggable="true" id="user3" class="user" ondragstart="drag(this, event)">Asia </div>

<div draggable="true" id="user4" class="user" ondragstart="drag(this, event)">Ocenia</div>

</div>

<div id="wraper-right-btn">
<ul>
<li><input type='button' value='' id='button1' src="go-button-green.png" ></li>
<li><form method="link" action="javascript:document.location.reload()">
<input type="submit" src="Reset button.png" value="" id='button2' onClick="this.value = ''">
</form></li>

</ul>
</div>



</div>

<div id="show/hide" >values are :

</div>

</div>

</div>

<script type="text/javascript">

function drag(drop_target, e) {

e.dataTransfer.setData('Text', drop_target.id);

}

function drop(drop_target, e) {

var id = e.dataTransfer.getData('Text');

drop_target.appendChild(document.getElementById(id));

e.preventDefault();

}

</script>
<script>
$(document).ready(function() {
     $("#refresh").bind("click", function() {
          $("#Container").load("index.html")
     });
});
</script>
<script type="text/javascript">

$(document).ready(function(){

    $("#button1").click(function () {

$('#user1').css('background','#6085EF');

$('#user2').css('background','#F06083');

$('#user3').css('background','#61DE76');

$('#user4').css('background','#EDA93C');

    });
});
</script>
<script type="text/javascript">

$(document).ready(function(){


$('#show/hide').css('display','none');

});
</script>

</body>

</html>

Friday, 23 November 2012

HTML5 Drag and Drop tutorial

Drag and Drop Same Countries :

1 comment: