Drag and Drop polymer elements.

[Nicolas Bouthors]

I have a list of polymer elements (r-variables) set as a content of another one (r-ruleset).

I set r-variables so that they can be dragged/dropped one on another one, so I can reorder them.

I can trigger on-drag and on-drop and on-dragover  properly so I can have callbacks  startDrag and stopDrag as methodes of r-variables;

event DataTransfer though does not allow me to carry some text info between these events.

It is stuck transfering some Clipboard data (What I select before I start to drag) intead of the info

I pass programmatically.

When I look into it, I can see that setData does not seem to set the info as I cannot read it back

immediatly.

Could it be a side effect of the way polymer events are handled ?

<polymer-element name="r-variable" on-drag='{{dragStart}}'  on-dragover="{{allowDrop}}" on-drop='{{dragStop}}'  extends="r-indexor" attributes="type name guid">

  <template>

...

 dragStart: function(ev) {

if (this.dragged) return;

ev.dataTransfer.effectAllowed='none';  // tried different values to no avail

ev.dataTransfer.setData("Text",this.name);

console.log("ev.dataTransfer.getData("Text")) // dataTransfer is not set with this.name

          this.dragged=true;

     },

     allowDrop: function(ev){

ev.preventDefault();

     },

     dragStop: function(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

console.log("dragStop",,ev,ev.target,data)   // does not provide what I set above

this.dragged=false;

 

     },

[Nicolas Bouthors]

In the mean time, here is a version of polymer-ui-element that supports reordering via

drag and drop. Added code in blue.

<link rel="import" href="polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html">

<link rel="import" href="polymer-ui-elements/polymer-ui-theme-aware/polymer-ui-theme-aware.html">

<polymer-element name="nb-polymer-ui-menu-item"

extends="polymer-ui-theme-aware"

on-drag='{{dragStart}}'  on-dragover="{{allowDrop}}"

on-drop='{{dragStop}}'  attributes="src label icon item">

  <template>

    <link rel="stylesheet" href="polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.css">

    <polymer-ui-icon src="{{src}}" icon="{{icon}}" showing?="{{icon || src}}"></polymer-ui-icon>

    <span id="label">{{label}}<content></content></span>

  </template>

  <script>

 var draginfo="";

    Polymer('nb-polymer-ui-menu-item', {

      label: '',

      // calc item's offset middle pos instead of using offsetTop/Height 

      // directly which requires to wait for submenu's collapsing transition to 

      // complete first before it can return the correct pos.

       enteredView: function() {

 console.log("nb menu item inserted now");

    },

     dragStart: function(ev) {

if (this.dragged) return;

draginfo=this;

this.dragged=true;

     },

     allowDrop: function(ev){

ev.preventDefault();

     },

     dragStop: function(ev){

if (draginfo=="") return;

ev.preventDefault();

var parent=this.parentNode

draginfo.dragged=false;

parent.insertBefore(draginfo,this)

draginfo="";

     },

      getOffsetMiddle: function() {

        var p = this.parentNode;

        if (p) {

          var i = Array.prototype.indexOf.call(p.items, this);

          var h = this.getItemHeight();

          return i * h + h/2 + p.items[0].offsetTop;

        }

      },

      getItemHeight: function() {

        return this.offsetHeight;

      }

    });

  </script>

</polymer-element>

[Steve Orvell]

Try setting dataTransfer in the dragstart event rather than the drag event. 

See http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-dataTransfer for more info.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
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.
For more options, visit https://groups.google.com/groups/opt_out.

[Steve Orvell]

More specifically, your handler is called dragStart, but it's connected to on-drag, try changing that to on-dragstart="{{dragStart}}"

[Nicolas Bouthors]

Tried moving from on-drag to on-dragStart

The good news is that  this works correctly

ev.dataTransfer.setData("Text",this.name);

// draginfo=this;

console.log("dragStart",  ev.dataTransfer.getData("Text"))

But another issue then appears: I am not allowed to drop an element on another one any more. The only change is to go from on-drag to on-dragStart.

I will scale down my app to try to reproduce it in a self contained manner.

[Nicolas Bouthors]

Here is a standalone example.

A list of variable appears on load; Select one and try drag on another one.

You can then see the behaviour changes by moving the event handler around

Steve is correct on noting that DataTransfer is setup on DragStart event.

But registration to this event seels to defeat the dragOver callback to allow drop to take place.

Note: deleted a previous message to provide a smalled example