[an error occurred while processing this directive]

Dojo drag and drop

                         

In this section, you will learn about dojo drag and drop.

Drag and Drop: This is a technique of dragging an item. Click an object or specific item that have to be dragged and dropped,  you hold down the mouse button and drag the object to the suitable destination.

Try Online: Drag and Drop

 

 

 

Here is the code of Program:

<html>
  <head>
  <title>Dojo Drag and Drop Example</title>

    <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">
    </script>

    <script type="text/javascript"
        dojo.require("dojo.dnd.source");
        dojo.require("dojo.parser");   
    </script>
  </head>
<body>

  <h1>Drag and Drop</h1>
  <table border="1" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="top">
        <!-- Source -->
          <div dojoType="dojo.dnd.Source" jsId="sourceData" class="source">
              <b style="background-color:#999999 ">Source Data</b>
              <div class="dojoDndItem" dndType="vinod">
                  <div>Vinod</div>
              </div>
              <div class="dojoDndItem" dndType="suman">
                  <div>Suman</div>
              </div>
              <div class="dojoDndItem" dndType="amar">
                  <div>Amar</div>
              </div>
              <div class="dojoDndItem" dndType="ravi">
                  <div>Ravi</div>
              </div>
              <div class="dojoDndItem" dndType="aman">
                  <div>Aman</div>
              </div>
              <div class="dojoDndItem" dndType="deepak">
                  <div><img src="1.jpg" /></div>
              </div>
              <div class="dojoDndItem" dndType="deepak">
                  <div><img src="2.jpg" /></div>
              </div>
          </div>
        </td>
      <td valign="top">
        <!-- Target -->
        <div dojoType="dojo.dnd.Target" jsId="targetData" class="target" 
accept="vinod,suman,amar,ravi,aman,deepak">
            <b style="background-color:#999999; ">Target Data</b>
        </div>
      </td>
    </tr>
  </table>

</body>
</html>

Output:

If you drag and drop the items, you get:

 

Try Online:

                         

Ask programming questions?

 

 

Add This Tutorial To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 

Current Comments

6 comments so far (post your own) View All Comments Latest 10 Comments:

the example does not work ...

Posted by patrik on Monday, 06.14.10 @ 21:14pm | #97577

      View This Comment Separately

It wont't work, cos there is a mistake in this code, dnd.source should be dnd.Source, if you look at javascript errors, the dojotype name is missplelt

Posted by xx on Wednesday, 12.9.09 @ 16:55pm | #93223

      View This Comment Separately

online example does not work you cunt wasted my time

Posted by james on Wednesday, 07.8.09 @ 12:34pm | #89147

      View This Comment Separately

The example does not work when we try online.

Posted by Leela Addagulla on Tuesday, 01.13.09 @ 15:30pm | #83791

      View This Comment Separately

The Online Example of the Drag and Drop doesn't work. The links and the mouse are normal.

Posted by William Brandy on Wednesday, 12.10.08 @ 07:35am | #82605

      View This Comment Separately

Hi,
the online example of the drag and drop doesn't work.I don't know why.
Have you a idea
thanks

Posted by ing on Monday, 09.29.08 @ 19:25pm | #80782

      View This Comment Separately
  JDO Tutorials
  EAI Articles
  Struts Tutorials
  Java Tutorials
  Java Certification

Tell A Friend
Your Friend Name

 

 
Browse all Java Tutorials
Java JSP Struts Servlets Hibernate XML
Ajax JDBC EJB MySQL JavaScript JSF
Maven2 Tutorial JEE5 Tutorial Java Threading Tutorial Photoshop Tutorials Linux Technology
Technology Revolutions Eclipse Spring Tutorial Bioinformatics Tutorials Tools SQL
 

Home | JSP | EJB | JDBC | Java Servlets | WAP  | Free JSP Hosting  | Search Engine | News Archive | Jboss 3.0 tutorial | Free Linux CD's | Forum | Blogs

About Us | Advertising On RoseIndia.net  | Site Map

India News

Send your comments, Suggestions or Queries regarding this site at roseindia_net@yahoo.com.

Copyright 2007. All rights reserved.

[an error occurred while processing this directive]