Switch to full style
HTML,DHTML,Javascript,XML,CSS
Post a reply

Drag and Drop using javascript

Tue Dec 02, 2008 1:56 am

If you want to make drag and drop in your website , i think the following example will be helpful to you .The example is based on javascript script language .There is two files html for test and javascript and it is the core of the example ,

index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
       <title>Drag and drop in website using javascript</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <script type="text/javascript" src="drag.js"></script>
   </head>
   <body>

      <div id="container">


<div id="info">Start drag process...</div>
<div id="square" style="position: relative; width: 60px; height: 60px; background:#990033; border: 2px solid #3399CC;"></div>



<script type="text/javascript">

   function begin (element, x, y) {
      var s = '#' + element.id + ' (begin drag)' + ' x:' + x + ', y:' + y;
      updateInfo(s);
   }

   function drag (element, x, y) {
      var s = '#' + element.id + ' (dragging)' + ' x:' + x + ', y:' + y;
      updateInfo(s);
   }

   function end (element, x, y) {
      var s = '#' + element.id + ' (end drag)' + ' x:' + x + ', y:' + y;
      updateInfo(s);
   }

   function updateInfo(s) {
      document.getElementById('info').innerHTML = s;
   }

   var square = DragHandler.attach(document.getElementById('square'));



   square.dragBegin = begin;
   square.drag = drag;
   square.dragEnd = end;


</script>



      </div>

   </body>
</html>


and the javascript file


Attachments
drag.js
drag and drop javascript file
(1.98 KiB) Downloaded 4088 times
untitledjj.JPG
screenshot image
untitledjj.JPG (5.05 KiB) Viewed 24883 times

Re: Drag and Drop using javascript

Thu May 14, 2009 11:24 am

What is the code for making windows pop up as javascript windows? I've seen the coding before and its something like "javascript:open" or something... I'm not really sure... Could anyone give me the link coding to do that? Thanks.
____________________
affiliateelite ~ affiliateelite.com ~ adgooroo ~ adgooroo.com

Post a reply
  Related Posts  to : Drag and Drop using javascript
 Drag and Drop     -  
 Drag and Drop in java     -  
 how to create a mouse over drop down in html ?     -  
 Validation of php drop down menu of months,days and years     -  
 i need help in javascript     -  
 When to use javascript?     -  
 using javascript     -  
 what is javascript ?     -  
 need help with javascript     -  
 JavaScript     -