polymer-sortablejs
polymer-sortablejs copied to clipboard
Published
20 hours ago •
SortableJS
SortableJS
Advanced Groups properties "pull" doesn't works.
I need a fixed left list, not sortable, with "pull" option equals to "clone" (so the items remains in list), and a right list (sortable) where to put the items from the left list.
I've set the put and pull properties as described in documentation.
My groups properties are:
groupLeft = {
name: 'listGroup',
pull: 'clone',
put: false
};
groupRight: {
name: 'listGroup'
};
The property "clone" seems doesn't works and the left items are movable to the right list.
Inspecting the code seems that Sortable.js has the right values, but the behaviour is not correct. If you think that this is an issue related to Sortable.js I'll open an issue in that repository.
Here the full working code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/polymer-sortablejs/polymer-sortablejs.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-item/paper-item-body.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/av-icons.html">
<style>
html, body, x-test {
height: 100%;
margin: 0;
}
body: {
/* make layout horizontal */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
</style>
</head>
<body>
<dom-module id="x-test">
<style is="custom-style" include="iron-flex iron-flex-alignment">
:host {
background-color: #FFF;
@apply(--layout-horizontal);
@apply(--layout-flex);
@apply(--layout-self-stretch);
}
sortable-js {
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid #616161;
background-color: #ffffff;
margin: 10px;
}
.sortable-ghost {
opacity: .3;
background: #f60;
}
</style>
<template>
<div class="flex layout horizontal">
<div id="left" class="flex self-stretch layout horizontal">
<sortable-js
id="sortableLeft"
animation="150"
sort="[[FALSE]]"
group="[[groupLeft]]"
class="flex self-stretch">
<template is="dom-repeat" items="{{itemsLeft}}">
<paper-item>
<paper-item-body>{{item.name}}</paper-item-body>
</paper-item>
</template>
</sortable-js>
</div>
<div id="right" class="flex self-stretch layout horizontal">
<sortable-js
id="sortableRight"
animation="150"
group="[[groupRight]]"
on-add="onAdd"
on-remove="onRemove"
class="flex self-stretch">
<template is="dom-repeat" items="{{itemsRight}}">
<paper-item>
<paper-item-body>[[item.name]]</paper-item-body>
<paper-icon-button
index="[[index]]"
icon="icons:clear"
title="remove"
on-tap="removeFromPlaylist">
</paper-icon-button>
</paper-item>
</template>
</sortable-js>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-test',
properties: {
FALSE: {
type: Boolean,
value: false
},
groupLeft: {
type: Object,
value: {
name: 'listGroup',
pull: 'clone',
put: false
}
},
groupRight: {
type: Object,
value: {
name: 'listGroup'
}
},
itemsLeft: {
type: Array,
value: window.items
},
itemsRight: {
type: Array,
value: [
{name:'aaaa'}
]
}
},
removeFromPlaylist: function(evt) {
let element = evt.target;
while (element.nodeName !== 'PAPER-ICON-BUTTON') {
element = element.parentElement;
}
this.splice('itemsRight', element.index, 1);
console.log(this.localName+'.removeFromPlaylist() itemsRight:',this.itemsRight);
},
onAdd: function(evt) {
console.log(this.localName+'.onAdd() itemsRight:',this.itemsRight);
},
onRemove: function(evt) {
console.log(this.localName+'.onRemove() itemsRight:',this.itemsRight);
}
});
});
// JSONP callback to initialize data from dummy source
window.setItems = function(items) {
window.items = items;
};
</script>
<script src="http://www.json-generator.com/api/json/get/cimkLprNMy?indent=2&callback=setItems"></script>
<x-test id="test"></x-test>
</body>
</html>
You must to add the bower components in order to run this demo:
bower install polymer iron-elements paper-elements polymer-sortablejs
Thank you to all responses
