{"id":61,"date":"2009-01-23T17:55:53","date_gmt":"2009-01-23T23:55:53","guid":{"rendered":"http:\/\/www.n8williams.com\/devblog\/?p=61"},"modified":"2009-02-09T23:02:25","modified_gmt":"2009-02-10T05:02:25","slug":"flextree-not-allowing-drops","status":"publish","type":"post","link":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops","title":{"rendered":"Flex Tree not allowing Drops"},"content":{"rendered":"

The Skinny<\/h2>\n

By using mx:Tree dropEnabled=”false” and registering the drag and drop listeners separately using the addEventListener Method with the use_capture parameter set to true, items could be consistently dropped from one control into the tree control. Otherwise, the drop was broken, not working many times, and the red ‘x’ disallowed drop feedback would persist, even when the drop should have worked.<\/p>\n

I got it to work by changing
\nalbumTree.addEventListener(DragEvent.DRAG_ENTER, onDragEnter, false, 0, true);
\nTO
\nalbumTree.addEventListener(DragEvent.DRAG_ENTER, onDragEnter, true, 0, true); <\/p>\n

Be sure and add DragManager.acceptDragDrop(UIComponent(event.currentTarget)); to the onDragEnter method (See links and discussion below).<\/p>\n

Working with drag and drop in Flex Tree Controls<\/h2>\n

First – make sure you are following the adobe documentation, and the great advice found in the following article:<\/p>\n

http:\/\/weblogs.macromedia.com\/pent\/archives\/2006\/11\/tree_drag_and_d.html<\/a><\/p>\n

On the adobe site, there is a great article about how to drop on to a tree control(Key here is dropEnabled has to be false on the tree, and you do your own drag and drop handling). This seemed to work better than the simpler example above where dropEnabled was true. I think relying on the default behaviors (dropEnabled=”true”) is kind of iffy, unless you are doing really simple stuff. Check the section ‘Dragging and Dropping to a tree control’ near the bottom:<\/p>\n

http:\/\/www.adobe.com\/devnet\/flex\/quickstart\/working_with_tree\/<\/a><\/p>\n

The dropEnabled property of the tree component handles drag and drop in certain ways in which it makes it hard to override or use your own drag and drop event listening at the same time.<\/p>\n

Also, if you have nested components and\/or a more complex mxml interface, you may run into the following problem –<\/p>\n

A flex tree nested in a few components was not accepting drops from a tileList nested in a few components. I think in traversing the components that the drag_enter precedence or firing was getting screwed up and not allowing drops. It would only accept drops sometimes. As you dragged over a VBox divider, the drop indicator (feedback) was showing a red x, and often, but not always, the red x would persist into the drop target the SHOULD have been allowing drops and drag enter. It was turning out that a slow drag would allow a drop, but a fast drag over to the drop target was not allowed, where the red x persisted.<\/p>\n

Adding DragManager.acceptDragDrop(UIComponent(this)); where this is the parent container, just makes everything in the parent container accept a drop, which is not what I was looking to do. And it’s kludgey. <\/p>\n

I got it to work changing albumTree.addEventListener(DragEvent.DRAG_ENTER, onDragEnter, false<\/strong><\/span>, 0, true); TO albumTree.addEventListener(DragEvent.DRAG_ENTER, onDragEnter, true<\/strong><\/span>, 0, true);<\/p>\n

For some reason the use_capture parameter fixed this. The key (which I don’t posses yet) is in understanding the different phases of event processing. Capture, target, and bubble.<\/p>\n

Adobe – “The use_capture parameter of the addEventListener()<\/code> method lets you control the phase in the event flow in which your listener will be active. It sets the value of the useCapture<\/code> property of the Event object. If useCapture<\/code> is set to true<\/code>, your listener is active during the capturing phase of the event flow. If useCapture<\/code> is set to false<\/code>, your listener is active during the targeting and bubbling phases of the event flow but not during the capturing phase. The default value is determined by the type of event, but is false<\/code> in most cases.<\/p>\n

To listen for an event during all phases of the event flow, you must call addEventListener()<\/code> twice, once with the use_capture parameter set to true<\/code>, and again with use_capture set to false<\/code>. This argument is optional. For more information, see Capturing phase<\/a>.”<\/p>\n

Note – Changing the event priority higher didn’t work (albumTree.addEventListener(DragEvent.DRAG_ENTER, onDragExit, false, 10, true);)<\/p>\n","protected":false},"excerpt":{"rendered":"

The Skinny By using mx:Tree dropEnabled=”false” and registering the drag and drop listeners separately using the addEventListener Method with the use_capture parameter set to true, items could be consistently dropped from one control into the tree control. Otherwise, the drop was broken, not working many times, and the red ‘x’ disallowed drop feedback would persist, … Continue reading “Flex Tree not allowing Drops”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"yoast_head":"\nFlex Tree not allowing Drops - The Dev Pages<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flex Tree not allowing Drops - The Dev Pages\" \/>\n<meta property=\"og:description\" content=\"The Skinny By using mx:Tree dropEnabled=”false” and registering the drag and drop listeners separately using the addEventListener Method with the use_capture parameter set to true, items could be consistently dropped from one control into the tree control. Otherwise, the drop was broken, not working many times, and the red ‘x’ disallowed drop feedback would persist, … Continue reading "Flex Tree not allowing Drops"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\" \/>\n<meta property=\"og:site_name\" content=\"The Dev Pages\" \/>\n<meta property=\"article:published_time\" content=\"2009-01-23T23:55:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2009-02-10T05:02:25+00:00\" \/>\n<meta name=\"author\" content=\"Nate Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@admin\" \/>\n<meta name=\"twitter:site\" content=\"@admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\"},\"author\":{\"name\":\"Nate Admin\",\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\"},\"headline\":\"Flex Tree not allowing Drops\",\"datePublished\":\"2009-01-23T23:55:53+00:00\",\"dateModified\":\"2009-02-10T05:02:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\"},\"wordCount\":651,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\"},\"articleSection\":[\"Flex\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\",\"url\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\",\"name\":\"Flex Tree not allowing Drops - The Dev Pages\",\"isPartOf\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#website\"},\"datePublished\":\"2009-01-23T23:55:53+00:00\",\"dateModified\":\"2009-02-10T05:02:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8williams.com\/devblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flex Tree not allowing Drops\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8williams.com\/devblog\/#website\",\"url\":\"https:\/\/n8williams.com\/devblog\/\",\"name\":\"The Dev Pages\",\"description\":\"A knowledge base for web applications development (and beyond)\",\"publisher\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8williams.com\/devblog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\",\"name\":\"Nate Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g\",\"caption\":\"Nate Admin\"},\"logo\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/n8williams.com\",\"https:\/\/twitter.com\/admin\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flex Tree not allowing Drops - The Dev Pages","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops","og_locale":"en_US","og_type":"article","og_title":"Flex Tree not allowing Drops - The Dev Pages","og_description":"The Skinny By using mx:Tree dropEnabled=”false” and registering the drag and drop listeners separately using the addEventListener Method with the use_capture parameter set to true, items could be consistently dropped from one control into the tree control. Otherwise, the drop was broken, not working many times, and the red ‘x’ disallowed drop feedback would persist, … Continue reading \"Flex Tree not allowing Drops\"","og_url":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops","og_site_name":"The Dev Pages","article_published_time":"2009-01-23T23:55:53+00:00","article_modified_time":"2009-02-10T05:02:25+00:00","author":"Nate Admin","twitter_card":"summary_large_image","twitter_creator":"@admin","twitter_site":"@admin","twitter_misc":{"Written by":"Nate Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#article","isPartOf":{"@id":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops"},"author":{"name":"Nate Admin","@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757"},"headline":"Flex Tree not allowing Drops","datePublished":"2009-01-23T23:55:53+00:00","dateModified":"2009-02-10T05:02:25+00:00","mainEntityOfPage":{"@id":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops"},"wordCount":651,"commentCount":0,"publisher":{"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757"},"articleSection":["Flex"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#respond"]}]},{"@type":"WebPage","@id":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops","url":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops","name":"Flex Tree not allowing Drops - The Dev Pages","isPartOf":{"@id":"https:\/\/n8williams.com\/devblog\/#website"},"datePublished":"2009-01-23T23:55:53+00:00","dateModified":"2009-02-10T05:02:25+00:00","breadcrumb":{"@id":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8williams.com\/devblog\/flex\/flextree-not-allowing-drops#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8williams.com\/devblog\/"},{"@type":"ListItem","position":2,"name":"Flex Tree not allowing Drops"}]},{"@type":"WebSite","@id":"https:\/\/n8williams.com\/devblog\/#website","url":"https:\/\/n8williams.com\/devblog\/","name":"The Dev Pages","description":"A knowledge base for web applications development (and beyond)","publisher":{"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8williams.com\/devblog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757","name":"Nate Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g","caption":"Nate Admin"},"logo":{"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/n8williams.com","https:\/\/twitter.com\/admin"]}]}},"_links":{"self":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts\/61"}],"collection":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":0,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"wp:attachment":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}