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;
}
No comments:
Post a Comment