drag & drop in dojotoolkit

Question

I am new to dojo. I have three divs; the first div has 10 pictures and other two divs are empty.

I want to allow the user to drag pictures to any div (2,3) or drag back to div1.

I want to store the pictures in a DB using PHP.

Answer 1

As for the dragging and dropping, you'll need to use dojo.dnd.Source.

In your Js, you'll need:

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

Your HTML will look like this (for the most part):

<div dojoType="dojo.dnd.Source" id="div1">
  <div class="dojoDndItem">
      <img />
  </div>
  <div class="dojoDndItem">
      <img />
  </div>
  ... 8 more times ...
</div>

I set up a simple example using google's logo that you can drag from one div to another on jsbin.

As for saving to a database, I'm unclear on what you want to save. The src? Something else?

That being said, you could use dojo.query to get the images of a certain div to call an xhrGet to your PHP page/service.

Basically:

 dojo.query("img",dojo.byId("div1")).forEach( function() {
     // this is now the image
     dojo.xhrGet( { url: '/somepage.php',
                    data: { image_name: this.title } // ???: depends on what you want
                    load: function( data ) {
                      alert("I worked!");
                    },
                    error: function( data ) {
                       alert("O NOES!!!");
                    }
                }
    );
 });