HTML5 dragging and dropping custom elements hangs?

[Shabbir Bhojani]

Hi all,

Please refer the attached file for reference. What I'm trying to do is this:

1. There are 2 custom elements x-list and x-item. x-list items contain zero or more x-item elements. x-item elements can have nested x-list elements so we can have recursively nested components.

2. The data is bound to a single x-list element on the page via MDV.

3. The users can use the purple borders on the x-items to drag and drop them on each other. A side question, why does the dragging only work with the border and not the content? Some shadow DOM limitation?

4. When an item is dropped on another, the dropped item is duplicated (via JSON.stringify then JSON.parse) and added to the target x-item element's subItems array which should cause a re-draw due to the MDV bindings and the item should get duplcated. (I also want to remove the original item once the duplication is done but haven't gotten to that yet.) This isn't working. What is happening is that the page hangs on the drop event. Having Polymer logging enabled and looking at the console, it seems that Polymer gets into some kind of an endless loop. So, my main question is, why does it hang? Is it my code or is it a Polymer bug?

Thanks in advance for any help,

Shabbir.

[Eric Bidelman]

I took the liberty of throwing this up on a jsbin: http://jsbin.com/uyosen/2/edit

Briefly testing in Chrome Canary, it looks to not hang if Object.observer() is enabled

in about:flags. On the surface, it would appear to be an issue with our O.o() polyfill.

Would you mind filing an issue and attach this test case?

https://github.com/Polymer/mdv/issues/new

--
 
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
Visit this group at http://groups.google.com/group/polymer-dev.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0f190829-d866-4b82-bc7c-5419baa4de12%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Shabbir Bhojani]

Hi Eric,

I have the latest Chrome Canary and there's no Object.Observer() option in about:flags. I enabled "Enable Experimental JavaScript" and it doesn't hang any more. 

However I do see an unexpected behaviour, Upon dropping the x-item seems to be added to every other x-item's subItems not just the drag target. Why would that be?

Also, any idea on why I can only drag with the borders and not with the content of x-items.

Thanks,

Shabbir.

[Shabbir Bhojani]

Hi again,

I was able to work around the dragged item being added to items other than the drop target by making this change to the data model:

Before:

        document.querySelector('x-list').items = [
            {title: '1'},
            {title: '2', subItems: [
                {title: '2a', subItems: [
                    {title: '2a1'},
                    {title: '2a2'},
                    {title: '2a3'},
                ]},
                {title: '2b'},
                {title: '2c'}
            ]},
            {title: '3'}
        ];

Now:

        document.querySelector('x-list').items = [
            {title: '1', subItems: []},
            {title: '2', subItems: [
                {title: '2a', subItems: [
                    { title: '2a1', subItems: [] },
                    { title: '2a2', subItems: [] },
                    { title: '2a3', subItems: [] },
                ]},
                { title: '2b', subItems: [] },
                { title: '2c', subItems: [] }
            ]},
            { title: '3', subItems: [] }
        ]

But I do feel like this is a workaround for another MDV bug. What do you think?

My latest code is here. As you can see, I've implemented the drag and drop functionality and have used

this.templateInstance.model.items.splice(this.templateInstance.model.items.indexOf(this.templateInstance.model.item), 1);

in the 'dragend' handler to remove the current item ("this") from the model. Is this the right way to remove "this"? Is there a more elegant solution?

Thanks,

Shabbir.

[Steve Orvell]

Just starting to dissect this and thanks for the great test case...

The issue you're seeing with needing to set subItems explicitly is due to the fact that x-list has the items property in its prototype set to an array. That means if items is not specifically set on the x-list instance, pushing to the items property will push to the prototype's items array, which is shared by all instances of x-list.

Instead, you can do something like this in x-list:

ready: function() {

  this.items = this.items || [];

}

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/23735b8f-079a-453c-b237-37ba770b49f2%40googlegroups.com.

[Steve Orvell]

Yeah, the browser hanging is due to the items array being on the prototype. Changing the code to what I recommended above should fix the issue.

The drag and drop issue is definitely a chrome bug. I filed the bug here to track the problem: https://code.google.com/p/chromium/issues/detail?id=264983

Thanks for making us aware of it!

[Shabbir Bhojani]

Hi Steve,

Thanks for the insight and for filing the Chrome bug.

However, the fix that you mentioned doesn't seem to work. Please take a look here. It still replicates the dropped items for each item with an empty array of subItems.

Thanks,

Shabbir.

[Steve Orvell]

You need to remove the prototype value. You don't need the publish blocks.

See this... http://www.jsbin.com/ugehar/2/edit

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/59f50bd7-18b1-45c4-a064-5b8a1833510d%40googlegroups.com.

[Shabbir Bhojani]

Removing the publish blocks helped. Thanks.

[Shabbir Bhojani]

Hi,

While that Chromium bug is still pending, I tried to make this work with the Shadow DOM polyfill instead of the native implementation but that doesn't seem to work either. Please see the attached file. The sub-Items aren't rendering when using the Shadow DOM polyfill. Any ideas?

Thanks,

Shabbir.