ansaurus

Question

dojo - mouse(x, y) - drag and drop - frustration.

Answer 1

A:

I've got it now...

dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
var px = 0;
var py = 0;

for (var i = 0; i < nodes.length; i++) {
var nPos = dojo._abs(nodes[i]);
px = nPos.x > px ? nPos.x : px;
py = nPos.y > py ? nPos.y : py;

}
dojo.dnd.manager().OFFSET_X = 0 - (source._lastX - px);
dojo.dnd.manager().OFFSET_Y = 0 - (source._lastY - py);

ShowPrice(source, nodes);
});

but it will always cause a dnd cancel event to occur since the mouse is on the avatar.
any ideas on how to get the drop working?

2009-08-21 02:43:59

Answer 2

+2 A:

Dojo's DND is a limited in this sense. The avatar is positioned offset so the move events are not trapped by the node representing the drag. Typical source/targets will not work in this case. I have created a hybrid "mover/source" dnd example that may help you along with what you are trying to accomplish:

http://svn.dojotoolkit.org/src/demos/trunk/beer/src/dnd.js

Basically, we connect "mousedown" to some node. When that is fired, we create a clone of that node directly over where the the original node is in the page (see _dragStart function). Then, we register temporary mousemove and mouseup event listeners. mousemove is a tight function optimized for speed. simply set the top/left position of the "avatar" (the clone) relative to e.pageX and e.pageY (normalized event object parts).

when mouseup is fired, we disconnect both mouseup and mousemove events (this._listeners). In the sample the "overTarget" function simply returns true. You can change this logic to be whatever you need to ensure the current pageX/pageY coords are within a bounding box of your choice (a Source/Target, whatever, however you like).

In the example, I have it animating back to the original x/y of the "source", or turning it into a dojo.dnd.Moveable (it being the cloned node), creating a sort of markupfactory out of the source. You will likely want to just use this to add whatever data to your cart, and destroy the avatar.

Hope this helps.

dante 2009-08-21 19:14:58

Please forgive my ignorance as i'm rather new to dojo.(i named the file beer.js i.e. /dojo/beer.js)how do i implement the hybrid you created?dojo.require("demos.beer.src.dnd");dojo.require("beer.MadeDnd");<script type="text/javascript" src="dojo/beer.js" djconfig="parseOnLoad: true, isDebug:false"></script>all or some of the above?Your help is appreciated.

2009-08-24 03:43:58

Answer 3

A:

For the time being...(since i didn;t know how to implement the hybrid js)

i've utilised the cancel event and compared the mouse coords to each source object on the page to determine which one it's was intended to be dropped into.

JS in page is now:

var mchandle;
dojo.require("dojo.dnd.Source");
var lastSrc;
function init() {
    dojo.subscribe("/dnd/drop", function(source, nodes, iscopy) {
     dojo.byId("msg").innerHTML += " drop";
     dojo.disconnect(mchandle);
    });
    dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
     lastSrc = source;
     mchandle = dojo.connect(dojo.doc, "onmousemove", "mouseCoords");
     dojo.byId("msg").innerHTML = "start";
     var px = 0;
     var py = 0;
     for (var i = 0; i < nodes.length; i++) {
      var nPos = dojo._abs(nodes[i]);
      px = nPos.x > px ? nPos.x : px;
      py = nPos.y > py ? nPos.y : py;
     }
     dojo.dnd.manager().OFFSET_X = 0 - (source._lastX - px);
     dojo.dnd.manager().OFFSET_Y = 0 - (source._lastY - py);


    });
    dojo.subscribe("/dnd/cancel", function() {
     dojo.byId("msg").innerHTML += " cancel";
     dojo.query("[dojotype=\"dojo.dnd.Source\"]").forEach(function(node, index, array) {
      var elemXY = dojo.coords(node);
      if ( //in source box
      (elemXY.x <= document.mouse.x && document.mouse.x <= (elemXY.x + elemXY.w)) && (elemXY.y <= document.mouse.y && document.mouse.y <= (elemXY.y + elemXY.h))) {
       var s = new dojo.dnd.Source(node, null);
       s.insertNodes(true, lastSrc.getSelectedNodes(), null, null);
      }
     });
     dojo.disconnect(mchandle);
     lastSrc = null;
    });
}
dojo.addOnLoad(init);
function mouseCoords(ev) {
    var px, py;
    ev = ev || window.event;
    if (ev.pageX || ev.pageY) {
     px = ev.pageX;
     py = ev.pageY;
    } else {
     px = ev.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
     py = ev.clientY + dojo.body().scrollTop - dojo.body().clientTop;
    }
    document.mouse = {
     "x": px,
     "y": py
    };
}

A Bug is still occurring. I drag to the target (all is well.) i drag from the target and a duplicate avatar is stuck on the screen. firebug reports an error.

_5.getItem(_6[i].id) is undefined
} catch (e) {\r\n                                 dojo.js (line 203)

could you offer any help?

2009-08-25 04:11:41

error comes from dojo._loadPath in dojo.js and occurs between onmousemove events FYI

2009-08-26 05:36:27

ansaurus

tags:

views:

answers:

dojo - mouse(x, y) - drag and drop - frustration.

related questions