www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript: Drag and Drop Function with validation(Kindly help me to solve this prob)

  1. #1
    Join Date
    Aug 2014
    Posts
    3

    Javascript: Drag and Drop Function with validation(Kindly help me to solve this prob)

    Hello,

    I have a task to do using HTML5, CSS3 and JAVASCRIPT. Javascript play a main role in this task, kindly some one help me to come out this task.

    The task is, in page there two buttons one is checknow button and another one is Reset button, in middle one empty circle, in sidebar there is 6 small circles inside of the circle we have use gradient color image or element, this gradient image or elements circles are draggable.

    The concept is, if i drag three circles one by one and put in big middle circle and click check now means the result will be come to ok, if i drag two or four are any other than three circles and put into big circle means the result will be false, i mean wrong. If i click reset button means the entire page should be reset like page refresh. In side circle each circle should allow only one gradient image or elements not more than one.

    Kindly solve this javascript validation to come out this problem. Thanks for advance. I have attached the screenshot below.

    design1.jpg
    desgin2.jpg
    design3.jpg
    desgin4.jpg

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    logically speaking, you would have the co-ordinates of the larger circle, therefor when you drop any circles(presuming each smaller circle has their own id or name) in the larger circle, click on check...u can at that time find out which smaller circle is withing the size of the larger circle, then see what is the name of that smaller circle, this way you can validate which item is in larger circle.

    Hope this helps
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Aug 2014
    Posts
    3
    Hi Khalid Ali,

    Thank for your reply, kindly give some sample script, it will help me to solve this problem. Please find the above screen shot images, and also i have attached the code below kindly follow the code and give some solution. Its incomplete code.

    Drag and Drop:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Exemplarr Task</title>
    <style>
    .main{
    	width:600px;
    	height:580px;
    	margin:0 auto;
    	background-color:#dfdfdf;
    	padding:20px;
    }
    .div_left{
    	float:left;
    	padding:20px;
    }
    .div_right{
    	width:100px;
    	height:580px;
    	float:right;
    }
    .button_checknow{
    	background:linear-gradient(#f1f8f0, #b0d8aa);
    	-moz-background:linear-gradient(#f1f8f0, #b0d8aa);
    	-webkit-background:linear-gradient(#f1f8f0, #b0d8aa);
    	-o-background:linear-gradient(#f1f8f0, #b0d8aa);
    	width:200px;
    	height:100px;
    	border:1px double black;
    	font-size:20px;
    	border-radius:10px;
    	margin-right:20px;
    }
    .button_reset{
    	background:linear-gradient(#faf4ed, #d6ae70);
    	-moz-background:linear-gradient(#faf4ed, #d6ae70);
    	-webkit-background:linear-gradient(#faf4ed, #d6ae70);
    	-o-background:linear-gradient(#faf4ed, #d6ae70);
    	width:150px;
    	height:60px;
    	border:1px double black;
    	font-size:20px;
    	border-radius:10px;
    	margin-right:20px;
    }
    .empty_circle{
    	width:250px;
    	height:250px;
    	border:1px solid black;
    	border-radius:50%;
    	margin:50px 0px 0px 70px;
    }
    #empty_sml_circle1, #empty_sml_circle2, #empty_sml_circle3, #empty_sml_circle4, #empty_sml_circle5, #empty_sml_circle16{
    	width:80px;
    	height:80px;
    	border:3px solid black;
    	border-radius:50%;
    	margin:10px;
    }
    .circle_right{
    	width:70px;
    	height:70px;
    	border:1px solid black;
    	border-radius:50%;
    	margin:4px;
    	background:linear-gradient(#f6d6d7, #d22525);
    }
    </style>
    <script>
    function allowDrop(ev){
    	ev.preventDefault();
    }
    function drag(ev){
    	ev.dataTransfer.setData("Text", ev.target.id);
    }
    function drop(ev){
    	ev.preventDefault();
    	var data = ev.dataTransfer.getData("Text");
    	ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>
    <div class="main">
    <div class="div_left">
    <button type="button" class="button_checknow">Check now</button>
    <button type="button" class="button_reset">Reset</button>
    <div class="empty_circle" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    
    <div class="div_right">
    <div id="empty_sml_circle1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="empty_sml_circle1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p class="circle_right" id="drag1" draggable="true" ondragstart="drag(event)"></p>
    </div>
    <div id="empty_sml_circle2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p class="circle_right" id="drag1" draggable="true" ondragstart="drag(event)" style="background:linear-gradient(#e2f6d6, #7ed947);"></p>
    </div>
    <div id="empty_sml_circle3" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p class="circle_right" id="drag1" draggable="true" ondragstart="drag(event)" style="background:linear-gradient(#faf6e3, #ddc540);"></p>
    </div>
    <div id="empty_sml_circle4" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p class="circle_right" id="drag1" draggable="true" ondragstart="drag(event)" style="background:linear-gradient(#e0f5d1, #7bd73f);"></p>
    </div>
    <div id="empty_sml_circle5" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p class="circle_right" id="drag1" draggable="true" ondragstart="drag(event)" style="background:linear-gradient(#e0e2fa, #4658df);"></p>
    </div>
    </div>
    </div>
    </body>
    </html>
    Last edited by jedaisoul; 08-09-2014 at 11:58 AM. Reason: code tags added

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    .center {
    }
    
    .circle {
     position:absolute;left:600px;top:100px;width:54px;height:54px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Test" onclick="alert(zxcDragEllipse.Check('e1'));" />
    <input type="button" name="" value="RESET" onclick="zxcDragEllipse.Reset('e1');" />
    
    <img class="circle" src="http://www.vicsjavascripts.org/StdImages/Ball.gif" />
    <img class="circle" src="http://www.vicsjavascripts.org/StdImages/Ball.gif" style="top:200px;" />
    <img class="circle" src="http://www.vicsjavascripts.org/StdImages/Ball.gif" style="top:300px;" />
    <img class="circle" src="http://www.vicsjavascripts.org/StdImages/Ball.gif" style="top:400px;" />
    
    <div id="e1" style="position:absolute;left:100px;top:100px;width:400px;height:400px;border:solid red 1px;border-radius:200px;" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcDragEllipse={
    
     Check:function(id){
      var o=this['zxc'+id];
      if (o){
       for (var n=0,z0=0;z0<o.a.length;z0++){
        o.a[z0][5]===true?n++:null;
       }
       return n;
      }
     },
    
     Reset:function(id){
      var o=this['zxc'+id];
      if (o){
       for (var z0=0;z0<o.a.length;z0++){
        o.a[z0][5]=false;
        o.a[z0][0].style.left=o.s[z0][1]+'px';
        o.a[z0][0].style.top=o.s[z0][2]+'px';
       }
      }
     },
    
     init:function(o){
      var id=o.CenterID,c=document.getElementById(id),d=this.bycls(o.DragClass),a,z0=0;
      if (c&&d[0]){
       o.c=c;
       o.rx=this.css(c,'width')/2;
       o.ry=this.css(c,'height')/2;
       o.a=[];
       o.s=[];
       for (;z0<d.length;z0++){
        a=[d[z0],this.css(d[z0],'width')/2,this.css(d[z0],'height')/2];
        o.a[z0]=a;
        o.s[z0]=[d[z0],this.css(d[z0],'left'),this.css(d[z0],'top')];
        this.addevt(d[z0],'mousedown','down',o,a);
       }
       this.addevt(document,'mousemove','move',o);
       this.addevt(document,'mouseup','up',o);
       this['zxc'+id]=o;
      }
     },
    
     down:function(e,o,d){
      o.xy=[e.clientX,e.clientY];
      o.d=d;
      o.drg=true;
      return this.rtn(e);
     },
    
     move:function(e,o){
      if (o.d){
       var xy=[e.clientX,e.clientY],x=this.css(o.d[0],'left'),y=this.css(o.d[0],'top');
       o.d[3]=x+xy[0]-o.xy[0];
       o.d[4]=y+xy[1]-o.xy[1];
       o.d[0].style.left=o.d[3]+'px';
       o.d[0].style.top=o.d[4]+'px';
       o.xy=xy;
       return this.rtn(e);
      }
     },
    
     up:function(e,o){
      if (o.d){
       var p=this.pos(o.c),m=[o.d[3]+o.d[1],o.d[4]+o.d[2]],x=m[0]-p[0]-o.rx,y=m[1]-p[1]-o.ry,s=x>0?y>0?0:3:y>0?1:2,x=Math.abs(x),y=Math.abs(y),h=Math.sqrt(x*x+y*y),pi=Math.PI/180,d=Math.acos((x*x+h*h-y*y)/(2*x*h))*180/Math.PI,d=s==1?90-d+90:s==2?d+180:s==3?90-d+270:d;
       if (isFinite(d)){
        var x=o.rx*Math.cos(d*pi)+o.rx+p[0],dx=o.d[1]*Math.cos(d*pi)+o.d[1]+o.d[3],y=o.ry*Math.sin(d*pi)+o.ry+p[1],dy=o.d[2]*Math.sin(d*pi)+o.d[2]+o.d[4];
        o.d[5]=s==3?x>dx&&y<dy:s==2?x<dx&&y<dy:s==1?x<dx&&y>dy:x>dx&&y>dy;
       }
       o.d=false;
       return this.rtn(e);
      }
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
    
     bycls:function (n,t,o){
      for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
       if((' '+c[z0].className+' ').match(' '+n+' ')){
        a.push(c[z0]);
       }
      }
      return a;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
     }
    
    
    
    }
    
    zxcDragEllipse.init({
     CenterID:'e1',
     DragClass:'circle'
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Aug 2014
    Posts
    3
    Thank you so much Mr. Philips, This code will really helpful for me, thanks for spend your precious time for me, thanks a lot.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles