Skip to content

Instantly share code, notes, and snippets.

@saurshaz

saurshaz/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saurshaz/3520f602fb6a7f81aa49 to your computer and use it in GitHub Desktop.
Save saurshaz/3520f602fb6a7f81aa49 to your computer and use it in GitHub Desktop.
Download ZIP
Element based on the awesome Sortable.js library// source http://jsbin.com/mejuba
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Element based on the awesome Sortable.js library" />
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="polymer@0.5.1" data-semver="0.5.1" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script>
// todo :: wrap in content loaded block
var deletedivcoll = document.querySelectorAll('.deletediv');
for (var i in deletedivcoll) {
deletedivcoll[i].on('click', function(e) {
console.log('delete called', e);
});
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<!-- Simple List -->
<div id="simpleList" class="list-group list-group-1">
<div class="list-group-item list-group-item-1">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a>
</div>
<div class="list-group-item list-group-item-1">It works with Bootstrap...</div>
<div class="list-group-item list-group-item-1">...out of the box.</div>
<div class="list-group-item list-group-item-1">It has support for touch devices.</div>
<div class="list-group-item list-group-item-1">Just drag some elements around.</div>
</div>
<!-- List with handle -->
<div id="listWithHandle" class="list-group list-group-2">
<div class="list-group-item list-group-item-2">
<span class="badge">14</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span> Drag me by the handle
</div>
<div class="list-group-item list-group-item-2">
<span class="badge">2</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span> You can also select text
</div>
<div class="list-group-item list-group-item-2">
<span class="badge">1</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span> Best of both worlds!
</div>
</div>
<!--
Element based on the awesome Sortable.js library by @rubaxa on github (http://rubaxa.github.io/Sortable/)
I thought of wrapping it up in a component
*********************************************************************
Attributes
*********************************************************************
putpreference - true, false, array - one value for put prefence
pullpreference - true, false, clone - one value for put prefence
dragitemselector - selector for the drag item
dragareaselector - selector for the drag area (from where to drag)
dropareaselector - selector for the drop area (where to drop)
dragtype - simpleList/listWithHandle (type of list)
draghandle - dragging handler to be used in ccase of listWithHandle
draggroupname - group to be associated for dragging across allowance
ignoredropselector - selector for drop targets to be ignored
deleteenabled - enable delete functionality for dropped items (.deletediv class for the delete trigger)
dropanddragenabled - enable drag again functionality for dropped items (.dragdiv class for the delete trigger)
@element resonant-platter
-->
<!-- Latest Sortable -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<polymer-element name="ak-dnd" attributes="dragareaselector dragitemselector dropareaselector dragtype draggroupname ignoredropselector pullpreference putpreference dropanddragenabled deleteenabled">
<template>
<!-- Latest compiled and minified CSS -->
</template>
<script>
Polymer('ak-dnd', {
ready: function() {
var elthis = this;
// set defaults
elthis.pullpreference = elthis.pullpreference || true;
elthis.putpreference = elthis.putpreference || true;
elthis.ignoredropselector = elthis.ignoredropselector || "";
elthis.dropareaselector = elthis.dropareaselector || "";
var el = document.querySelector(elthis.dragareaselector);
var sortable = new Sortable(el, {
group: {
name: elthis.draggroupname,
pull: elthis.pullpreference,
put: elthis.putpreference
}, // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
sort: true, // sorting inside list
disabled: false, // Disables the sortable if set to true.
store: null, // @see Store
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
handle: elthis.draghandle, // Drag handle selector within list items
filter: elthis.ignoredropselector, // Selectors that do not lead to dragging (String or Function)
draggable: elthis.dragitemselector, // Specifies which items inside the element should be sortable
ghostClass: elthis.dropareaselector,
// Class name for the drop placeholder - jsbin.com/luxero/3
setData: function(dataTransfer, dragEl) {
dataTransfer.setData('Text', dragEl.textContent);
},
// dragging started
onStart: function(evt) {
//evt.oldIndex; // element index within parent
//console.log(evt);
var viewEl = evt.item.querySelector("#view") || evt.item;
evt.item.innerHTML = viewEl.innerHTML;
},
// dragging ended
onEnd: function( /**Event*/ evt) {
var sectionWrapper = document.createElement('section');
sectionWrapper.id = 'wrapperid';
sectionWrapper.setAttribute("class", elthis.dropareaselector);
if (elthis.deleteenabled) {
sectionWrapper.innerHTML = "<div id='delete' class='deletediv remove label label-danger'>Delete</div>"
}
if (elthis.dropanddragenabled) {
sectionWrapper.innerHTML += "<div id='drag' class='dragdiv glyphicon glyphicon-move'>Drag</div>"
}
sectionWrapper.innerHTML += "<div id='view'>" + evt.item.innerHTML + "</div>";
//sectionWrapper.appendChild(markupwrapper);
evt.item.innerHTML = sectionWrapper.innerHTML;
console.log(evt.item);
//evt.newIndex; // element's new index within parent
},
// Element is dropped into the list from another list
onAdd: function( /**Event*/ evt) {
var itemEl = evt.item; // dragged HTMLElement
//var markupwrapper = elthis.wrapperelementmarkup;
// + indexes from onEnd
},
// Changed sorting within list
onUpdate: function( /**Event*/ evt) {
var itemEl = evt.item; // dragged HTMLElement
// + indexes from onEnd
},
// Called by any change to the list (add / update / remove)
onSort: function( /**Event*/ evt) {
// same properties as onUpdate
},
// Element is removed from the list into another list
onRemove: function( /**Event*/ evt) {
// same properties as onUpdate
},
onFilter: function( /**Event*/ evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
}
});
}
});
</script>
</polymer-element>
<ak-dnd dragitemselector=".list-group-item-2" dragareaselector=".list-group-2" dropareaselector=".list-group-2" dragtype="listWithHandle" draggroupname="draggroup1" ignoredropselector=".list-group-1" draghandle=".glyphicon-move" pullpreference="clone" putpreference="false" deleteenabled="true" dropanddragenabled="true"></ak-dnd>
<ak-dnd dragitemselector=".list-group-item-1" dragareaselector=".list-group-1" dropareaselector=".list-group-1" dragtype="simpleList" draggroupname="draggroup1" ignoredropselector=".list-group-2" draghandle=".glyphicon-move" pullpreference="false" putpreference="true" deleteenabled="true" dropanddragenabled="true"></ak-dnd>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment