How to add an image to an item in a dojo/dnd/Source

Question

I've create a dnd solution, with a source and target location. Right now the drag is bi-directional, I would like to have it be one-direction target to source. Then from the source add a image to each item (a delete icon), so that the users can then click the icon and send the record back to the correct target.

Part 1, I am trying to understand how to make the dnd one-directional and Part 2, how do I add an image to each item.

Thanks

score 0 · Accepted Answer · answered Aug 23 '12 at 12:25

There are events which handles this in the dnd module.

as for 'part1', see this http://dojotoolkit.org/reference-guide/1.8/dojo/dnd.html#id6 and set is'Source : false on the target which should only be a target.

and with 'part2' go to http://dojotoolkit.org/reference-guide/1.8/dojo/dnd.html#id8 and read about 'onDrop'. If overloading that function in your 'target-only' source, you will gain access to the nodes which is being dropped.

 onDrop: function(source, nodes, copy) {
    dojo.forEach(nodes, function(node) {
       node.innerHTML += "<button title=Delete> X </button>";
    });
 }

score 0 · Answer 2 · answered Aug 26 '12 at 21:37

This is what I got working.

dojo.connect(selectedInstructions, "onDndDrop", instructions.addDeleteButton);

addDeleteButton: function (source, nodes, copy, target) {
    if (source != target) {
        dojo.forEach(nodes, function(node) {
            var instructionId = node.getAttribute("id");
            var oImg = document.createElement("img");
            oImg.setAttribute('src', 'images/delete.png');
            oImg.setAttribute('alt', 'Remove');
            oImg.setAttribute('class', 'remove_instruction');
            oImg.setAttribute('onClick', "javascript:instructions.removeInstruction('" + instructionId + "')");
            document.getElementById(instructionId).appendChild(oImg); 
        });
    }
},

I then tried to get on to work, since connect is being depreciated, but I didn't appear to have much luck. I will have to come back to it at a later date, as I am on a time crunch right now to get this code out.

on(selectedInstructions, "onDrop", instructions.addDeleteButton);
aspect.after(selectedInstructions, "onDrop", instructions.addDeleteButton);

Wish the Dojo documentation was better. Thanks goodness for the community and it's support though.

I think it would be perfectly applicable, using either one - one or aspect. you may however want to `hitch` into `instructions` to get the correct scope such as : `aspect.after(selectedInstructions, "onDrop", lang.hitch(instructions, 'addDeleteButton');`. As for `.on`, it should work - try removing 'on' prefix though - but its design is for DOMEvent mainly imho — mschr, Aug 26 '12 at 21:54

How to add an image to an item in a dojo/dnd/Source

2 Answers2