I have tried to get rubaxa sortable (http://rubaxa.github.io/Sortable/ ) working with polymer.
I started with rubaxa-sortable, which should do exactly that, and works well for standard items ( https://github.com/divshot/sortable-list/blob/master/sortable-list.html)
However, as soon as I use custom elements the effects become strange.
An old thread (http://polymer-dev.narkive.com/YWiwS9A9/custom-element-drag-and-drop) has given me the hint to check different display types.
Behavior is as follows:
display: block: no dragging possibledisplay: inline: dragging possible, but ghost is far from mousedisplay: inline-block: dragging possible, but ghost is far from mouseAny ideas on how to fix that? The other post seems to suggest it is a bug, but that was a year ago..?
To illustrate I have copied the sortable-list code to jsbin and extended it: http://jsbin.com/zemugeyulo/1/edit?html,output
Any ideas if that is fixable? I have just started with those topics, so I might have missed something obvious..?
My mistake was to put the display tag in the wrong place. I did:
<polymer-element name="custom-element" attributes="text display">
<template>
<style>
div {
display: {{display}};
background: grey;
border: 1px solid #ddd;
border-radius: 3px;
padding: 6px 12px;
margin-bottom: 3px;
width: 80%;
}
</style>
<div>
<b>{{text}}</b>
</div>
</template>
<script>
Polymer({});
</script>
Where the correct solution would be
<polymer-element name="custom-element" attributes="text display">
<template>
<style>
:host {
display: {{display}};
}
div {
background: grey;
border: 1px solid #ddd;
border-radius: 3px;
padding: 6px 12px;
margin-bottom: 3px;
width: 80%;
}
</style>
<div>
<b>{{text}}</b>
</div>
</template>
<script>
Polymer({});
</script>
@rubaxa: Thanks for the support and the great library!
As I understand it, you can fix this by specifying display directly at custom-element.
Or something like that (although it is not pretty):
// Bind on `mousedown`
function fixDisplay(evt) {
var el = evt.target;
if (el.shadowRoot) {
var realEl = evt.target.shadowRoot.lastElementChild;
var style = window.getComputedStyle(realEl);
el.style.display = style.display;
}
}