« »

This JavaScript makes a basic dragable calculator.

Label: A Calculator That You Can Drag

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
    <!--
     .drag{position:relative;cursor:hand; border: 1px solid black; width: 150px; height: 100px; padding: 10px; background-color: silver;}
    //-->
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="JavaScript1.2">
    <!--
     var ie=document.all
     var ns6=document.getElementById&&!document.all

     var dragapproved=false
     var z,x,y

     function move(e)
     {
          if (dragapproved)
          {
               z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
               z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
               return false
          }
     }

     function drags(e)
     {
          if (!ie&&!ns6)
               return
          var firedobj=ns6? e.target : event.srcElement
          var topelement=ns6? "HTML" : "BODY"

          while (firedobj.tagName!=topelement&&firedobj.className!="drag")
          {
               firedobj=ns6? firedobj.parentNode : firedobj.parentElement
          }

          if (firedobj.className=="drag")
          {
               dragapproved=true
               z=firedobj
               temp1=parseInt(z.style.left+0)
               temp2=parseInt(z.style.top+0)
               x=ns6? e.clientX: event.clientX
               y=ns6? e.clientY: event.clientY
               document.onmousemove=move
               return false
          }
     }

     document.onmousedown=drags
     document.onmouseup=new Function("dragapproved=false")
    //-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div id="calc" class="drag">
  <form name="calculator">
   <table border="3" cellpadding="0" bordercolor="gray" bgcolor="black" cellspacing="1" width="150">

    <tbody><tr>
     <td>
      <input type="text" size="23" length="19" value="" name="ans" style="background: black none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; color: red;">
     </td>
    </tr>
   </tbody></table>

   <table border="3" cellpadding="2" bordercolor="gray" cellspacing="2" width="150" bgcolor="black">
    <tbody><tr>

     <td align="center">
      <input type="button" value="  7  " name="seven" onmousedown="document.calculator.ans.value+='7'">
     </td>
     <td align="center">
      <input type="button" value="  8  " name="eight" onclick="document.calculator.ans.value+='8'">
     </td>
     <td align="center">
      <input type="button" value="  9  " name="nine" onclick="document.calculator.ans.value+='9'">
     </td>

     <td align="center">
      <input type="button" value="  /  " name="divide" onclick="document.calculator.ans.value+='/'">
     </td>
    </tr>
    <tr>
     <td align="center">
      <input type="button" value="  4  " name="four" onclick="document.calculator.ans.value+='4'">
     </td>
     <td align="center">

      <input type="button" value="  5  " name="five" onclick="document.calculator.ans.value+='5'">
     </td>
     <td align="center">
      <input type="button" value="  6  " name="six" onclick="document.calculator.ans.value+='6'">
     </td>
     <td align="center">
      <input type="button" value="  *  " name="multiply" onclick="document.calculator.ans.value+='*'">
     </td>
    </tr>

    <tr>
     <td align="center">
      <input type="button" value="  1  " name="one" onclick="document.calculator.ans.value+='1'">
     </td>
     <td align="center">
      <input type="button" value="  2  " name="two" onclick="document.calculator.ans.value+='2'">
     </td>
     <td align="center">
      <input type="button" value="  3  " name="three" onclick="document.calculator.ans.value+='3'">

     </td>
     <td align="center">
      <input type="button" value="  -  " name="subtract" onclick="document.calculator.ans.value+='-'">
     </td>
    </tr>
    <tr>
     <td align="center">
      <input type="button" value="  C  " name="clear" onclick="document.calculator.ans.value=''">
     </td>

     <td align="center">
      <input type="button" value="  0  " name="zero" onclick="document.calculator.ans.value+='0'">
     </td>
     <td align="center">
      <input type="button" value="  =  " name="equal" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)">
     </td>
     <td align="center">
      <input type="button" value="  +  " name="add" onclick="document.calculator.ans.value+='+'">
     </td>

    </tr>
   </tbody></table>
  </form>
  <p align=center style="font-size: 10px;">Edited by JavaScriptBank.com</p>
  </div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->