CODEWITHSUNDEEP
javascriptdojodrag-and-drop
Shantanu Tomar
Shantanu Tomar

Reputation: 1712

Dojo Drag and Drop

I urgently need to write a javascript code for drag and drop using dojo. Please provide me link containing the right code for the same. I just want the simple functionality that items from 1 container can be dropped to items to another container. Nothing decorative. I have goggled it but not getting it right .

Upvotes: 2

Views: 6045

Answers (3)

AbdulAziz
AbdulAziz

Reputation: 6278

Here's an example: if you want to drag and drop from one container to another container:

HTML

<div dojoType="dojo.dnd.Source" id="listNode" class="container1">
   <div dojoType="dojo.dnd.Source" class="dojoDndItem movableContainer">A container</div>
   <div class="dojoDndItem">Item 1</div>
   <div class="dojoDndItem">Item 2</div>
   <div class="dojoDndItem">Item 3</div>
</div>
<br>
<div dojoType="dojo.dnd.Source" class="container1">
</div>

JavaScript

dojo.require("dojo.dnd.Source");

CSS

.dojoDndItem { padding:3px; }
.movableContainer { border: 1px solid #aaa; }
.movableContainer div { margin-left: 5em; }
.container1 { border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em; cursor: pointer; }
.container2 {position:inherit;border-radius: 8pt 8pt 8pt 8pt; border:1px solid #aaa; padding: 1em 3em;cursor: pointer; }
#listNode { background: #ddd; }

And your are done.That's the magic.Here's a jsfiddle example: http://jsfiddle.net/V5yBs/

And I hope this is what you want. enjoy

Upvotes: 3

Koen Peters
Koen Peters

Reputation: 12916

Here's an example: if you want to drag and drop li's inside an ul you can do so like this: HTML:

<ul id="list">
  <li class="dojoDndItem">content</li>
  <li class="dojoDndItem">content</li>
  <li class="dojoDndItem">content</li>
</ul>

JavaScript:

dojo.require("dojo.dnd.Source");

dojo.addOnLoad(function(){
  new dojo.dnd.Source("list");
});​

That's it. Done. Here's a jsfiddle example: http://jsfiddle.net/xFcuB/

You can add all kinds of sugar to the while thing. Many many more info here: http://dojotoolkit.org/reference-guide/dojo/dnd.html#dojo-dnd

Upvotes: 5

Ken Wheeler
Ken Wheeler

Reputation: 1958

Take a look at http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux/

Upvotes: 1

Related Questions