My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 419: Setting accept and scope options for tree droppable
1 person starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Apr 2013


 
Reported by john.a.s...@gmail.com, Apr 9, 2013
I have a dynatree that is initialized and accepting non-dynatree draggables nicely. The problem is that no matter what the draggable reverts. i only want it to revert on "invalid". However, to do that requires specifying the selector(s) that are accepted for the droppable, or specifying matching scopes for the droppable and draggable.

I have been trying to find a way to specify in the droppable ' accept: ".myDraggableClass" ' & ' accept : ".mySecondDraggableClass" ' for two different draggables. This is very simple to specify in the options for just a plain jquery-ui droppable, but there doesn't seem to be a class in the dynatree api for getting at the droppable options.

I did try adding a scope to the droppable initialization default in the dynatree code. However 1) I couldn't get it to work and 2) that is a pretty sketchy workaround. I have spent a ton of time researching this and looking in vain for the droppable configuration, and would love to have a hook to the droppable where i could change/add to the default options, in this case with either a scope or accept.

It would have a significant impact on the usability for dropping non-node content (files, content, etc) from lists that are not part of dynatree.  Right now, the content reverts, and then subsequently disappears upon success.  On failure/no drop it also reverts.  This is confusing to users as they have to look to see that the node was added, and then it's disconcerting to see the added content float back and then disappear.  The desired behavior is to have the clone/draggable vanish upon success.  

If there is any sort of workaround I'd love to know as (naturally) it would be great to have ASAP.  thanks for such a great opensource plugin, looking forward to 2.0!
Apr 9, 2013
Project Member #1 moo...@wwwendt.de
Yes, draggable.options.revert may be set 'invalid', I updated Dynatree and the sample-dnd3.

The default behavior only checks, if we dropped over an element that is 'droppable'.
So a droppable dynatree is always considered valid.

I played around with the fact that revert may also be passed a function.
If we check there if the helper was marked 'rejected', we can return 'true'.

I commit this to the trunk, maybe you like to test or can improve this...
(Also still open: the helper reverts to the top-left of the tree control, not to the original source node position)
Status: Started
Labels: Milestone-Release1.2.5
Apr 9, 2013
#3 john.a.s...@gmail.com
Wow, that's great.  I'll give it a try tomorrow and let you know. Thanks!
Apr 10, 2013
#4 john.a.s...@gmail.com
So here's the upshot: change droppable option tolerance: from "intersect"
to  "pointer" on either the current production version or the newest
version on the trunk and it works.  Perhaps a better explanation of what
i'm trying to do is for dnd example 3 i'm trying to drop the "drag me
around" box on the tree.  If it succeeds, it should not revert.  If it
isn't a valid drop, it should.  Changing the tolerance to pointer did the
trick. It also didn't seem to bother moving nodes around on the tree
either, and avoids the helper reverting to the upper left.  Hope that
helps, you sure helped me, thanks!


On Tue, Apr 9, 2013 at 4:31 PM, John Schroeder
<john.a.schroeder@gmail.com>wrote:
Apr 13, 2013
Project Member #5 moo...@wwwendt.de
hmm, when I tested r658 I had this behavior in dnd3:

- dropping 'drag me around' over a sub node in the right tree is accepted. The helper does not revert. 
- dropping a node from the left tree over a sub node in the right tree is accepted. The helper does not revert. 

- dropping 'drag me around' over a folder in the right tree is rejected. The helper reverts OK. 
- dropping a node from the left tree over a folder in the right tree is rejected. The helper reverts to the top left corner of the left tree's container. 
- dropping a node from the left tree over the left tree is rejected. The helper reverts to the top left corner of the left tree's container. 

(The last two points are still a minor flaw)
I just tried to change 'tolerance' to 'pointer' but cannot see any change.
Maybe you changed s.th. else?

(I am going to use 'pointer' anyway, since it seems to be the better choice regarding the documentation)
Apr 13, 2013
#6 john.a.s...@gmail.com
Ah, I changed it to pointer in version 1.2.4 and that was the only thing i
changed to get it working for my draggables. Revert is just "false".

 Specifically:

// Attach ui.droppable to this Dynatree instance
if(dnd && dnd.onDrop) {
tree.$tree.droppable({
addClasses: false,
tolerance: "pointer",
greedy: false,
_last: null
});
}

FYI i have not tested dropping nodes from one tree onto another, just
external divs like "drag me around" and it reverts when not dropped and
does not revert when dropped.
Apr 13, 2013
Project Member #7 moo...@wwwendt.de
made dnd.revert configurable (r664) but enabling it will still slide back to top-left of the source tree's container.
So default is 'false'

Als the sample now enables revert for for the Droppable 

http://wwwendt.de/tech/dynatree/doc/sample-dnd3.html

	$("#draggableSample").draggable({
//      revert: "invalid", // slide back, when dropping over non-target
		revert: function(dropped){
			// Return `true` to let the helper slide back.
			if(typeof dropped === "boolean"){
				// dropped == true, when dropped over a simple, valid droppable target.
				// false, when dropped outside a drop target.
				return !dropped;
			}
			// Drop comes from another tree. Default behavior is to assume
			// a valid drop, since we are over a drop-target.
			// Therefore we have to make an extra check, if the target node
			// was rejected by a Dynatree callback.
			var helper = $.ui.ddmanager && $.ui.ddmanager.current && $.ui.ddmanager.current.helper;
			var isRejected = helper && helper.hasClass("dynatree-drop-reject");
			return isRejected;
			},
		connectToDynatree: true,
		cursorAt: { top: -5, left:-5 },
		helper: "clone"
	});

Status: Done

Powered by Google Project Hosting