google-code-export / dynatree

Automatically exported from code.google.com/p/dynatree
1 stars 0 forks source link

Setting accept and scope options for tree droppable #419

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
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!

Original issue reported on code.google.com by john.a.s...@gmail.com on 9 Apr 2013 at 1:39

GoogleCodeExporter commented 9 years ago
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)

Original comment by moo...@wwwendt.de on 9 Apr 2013 at 8:06

GoogleCodeExporter commented 9 years ago
https://code.google.com/p/dynatree/source/detail?r=658

Original comment by moo...@wwwendt.de on 9 Apr 2013 at 8:10

GoogleCodeExporter commented 9 years ago
Wow, that's great.  I'll give it a try tomorrow and let you know. Thanks!

Original comment by john.a.s...@gmail.com on 9 Apr 2013 at 8:32

GoogleCodeExporter commented 9 years ago
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:

Original comment by john.a.s...@gmail.com on 10 Apr 2013 at 10:34

GoogleCodeExporter commented 9 years ago
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)

Original comment by moo...@wwwendt.de on 13 Apr 2013 at 3:06

GoogleCodeExporter commented 9 years ago
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.

Original comment by john.a.s...@gmail.com on 13 Apr 2013 at 7:13

GoogleCodeExporter commented 9 years ago
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"
    });

Original comment by moo...@wwwendt.de on 13 Apr 2013 at 8:40