Drag and drop reset


Drag and drop reset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>edndType4</title>
<link rel="stylesheet" href="css/ednd.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/elib.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.adrag').ednd({
drag:true,
revert:"invalid",
containment:'.eContainer4',

});
$('.adrop').ednd({
drop:true,
type:'type4',


});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
}

$("#undo").click(function() {
alert('in undo click');
        revertDraggable($(".adrag"));
                       
});


});
</script>

</head>

<body>

<div class="eContainer3">

<div class="dragArea">
<div class="adrag ui-widget-content" id="adg1" edragid="1"> U.S.A </div>
<div class="adrag ui-widget-content" id="adg2" edragid="2"> India</div>
<div class="adrag ui-widget-content" id="adg3" edragid="3"> Australia </div>
<div class="adrag ui-widget-content" id="adg4" edragid="4"> U.K</div>
</div>

<div class="dropArea">
<div class="dp_con"><div class="adrop ui-widget-header" id="adp1" edropid="2"> </div></div>
<div class="dp_con"> Sydney<div class="adrop ui-widget-header" id="adp2" edropid="3"> </div><span class="feed_img"> </span></div>
<div class="dp_con">  London<div class="adrop ui-widget-header" id="adp3" edropid="4"> </div><span class="feed_img"> </span></div>
<div class="dp_con">  Washington DC<div class="adrop ui-widget-header" id="adp4" edropid="1"> </div><span class="feed_img"> </span></div>
</div>
<div class="eSubmit"></div>
<button id="undo" type="button">Undo</button>


</div>


</body>
</html>



JS
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
(function($){
$.fn.ednd = function(dnd){
var dnd = $.extend(eobjects,dnd);

var eobjects = {
            drag:true,
            drop:true,
            revert:true,
            containment:'cid',
            type:'type'
           
            };
           
var ed = dnd;


if(ed.drag){
if(is_touch_device()){
var a=0;
            $(this).each(function(){
                        var b=$(this).attr("id");
                        //alert(b);
                        var c=document.getElementById(b);
                        a++;
                        c.addEventListener("touchstart",touchHandler,true);
                        c.addEventListener("touchmove",function(e){e.preventDefault();},true);
                        c.addEventListener("touchmove",touchHandler,true);
                        c.addEventListener("touchend",touchHandler,true);
                        c.addEventListener("touchcancel",touchHandler,true);
            });
}
$(this).css({'cursor':'pointer'});
$(this).each(function(){

$(this).draggable({revert:ed.revert,containment:ed.containment, });

});

}

if(ed.drop){

 if(ed.type == 'type4'){
            $(this).next('.feed_img').hide();
            var that = $(this);
            var ec = 0;
            $(this).each(function(){
            $(".dp_con").droppable({
        drop: function(event, ui) {alert('in drop')
            if (!ui.draggable.data("originalPosition")) {
                ui.draggable.data("originalPosition",
                    ui.draggable.data("draggable").originalPosition);
            }
        }
    });                                         
});       

}

}

function is_touch_device() {
if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || (uagent.search('android') > -1) || (uagent.search('android') > -1)|| (platformAgent.search('android')>-1) || (platformAgent.search('linux')>-1)){
  return true;
 }else{
  return false;
 }
}


function touchHandler(a){
            var b=a.changedTouches,c=b[0],d="";
            switch(a.type){
                        case"touchstart":
                                    d="mousedown";
                                   
                                    break;
                        case"touchmove":
                                    d="mousemove";
                                    break;
                        case"touchend":
                                    d="mouseup";
                                    break;
                        default:
                                    return
            }
            var e=document.createEvent("MouseEvent");
            e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
            c.target.dispatchEvent(e);
}
return this;
};                      
})(jQuery);



CSS
/* ednd */

*{
margin:0;
padding:0;
}
.eContainer1,.eContainer2,.eContainer3,.eContainer4,.eContainer5{
border:2px solid #e4e4e4;
height:480px;
width:640px;
float:left;
margin:20px;
padding:10px;
}



.drag{
background:orange;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.drop{
border:1px solid red;
height:20px;
width:90px;
margin:5px;
}
.vdrop{
border:1px solid red;
height:20px;
width:90px;
margin:5px;
text-align:center;
}
.dragArea{
float:left;
border:1px solid;
}
.dropArea{
float:right;
}

.vdrag{
background:blue;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
}


.vdrop{
border:1px solid maroon;
height:20px;
width:90px;
margin:5px;
}


.adrag{
background:#A41730;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
}


.adrop{
border:1px solid maroon;
height:20px;
width:90px;
margin:5px;
text-align:center;
float:left;
}

.eSubmit{
background:url(../images/submit_old.png)no-repeat;
height:55px;
width:128px;
margin:230px 0 0 240px;
cursor:default;
opacity:0.4;
}
.dp_con{
height:50px;
width:300px;
border:1px solid;
}
.feed_pop{
float:left;
height:126px;
width:300px;
background:url(../images/popup.png)no-repeat;
position:absolute;
margin:295px 0 0 35px;
display:none;
text-align:center;
line-height:120px;
}
.eclose{
float:right;
cursor:pointer;
display:none;
}
.feed_correct{
float:left;
height:35px;
width:32px;
background:url(../images/feed_r.png) no-repeat;
}

.feed_wrong{
float:left;
height:35px;
width:32px;
background:url(../images/feed_w.png) no-repeat;
}