mirror of https://github.com/RubaXa/Sortable.git
RubaXa
10 years ago
3 changed files with 205 additions and 188 deletions
@ -0,0 +1,186 @@ |
|||||||
|
(function () { |
||||||
|
var byId = function (id) { return document.getElementById(id); }, |
||||||
|
console = window.console; |
||||||
|
|
||||||
|
|
||||||
|
if (!console.log) { |
||||||
|
console.log = function () { |
||||||
|
alert([].join.apply(arguments, ' ')); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
Sortable.create(byId('foo'), { |
||||||
|
group: "words", |
||||||
|
animation: 150, |
||||||
|
store: { |
||||||
|
get: function (sortable) { |
||||||
|
var order = localStorage.getItem(sortable.options.group); |
||||||
|
return order ? order.split('|') : []; |
||||||
|
}, |
||||||
|
set: function (sortable) { |
||||||
|
var order = sortable.toArray(); |
||||||
|
localStorage.setItem(sortable.options.group, order.join('|')); |
||||||
|
} |
||||||
|
}, |
||||||
|
onAdd: function (evt){ console.log('onAdd.foo:', [evt.item, evt.from]); }, |
||||||
|
onUpdate: function (evt){ console.log('onUpdate.foo:', [evt.item, evt.from]); }, |
||||||
|
onRemove: function (evt){ console.log('onRemove.foo:', [evt.item, evt.from]); }, |
||||||
|
onStart:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);}, |
||||||
|
onSort:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);}, |
||||||
|
onEnd: function(evt){ console.log('onEnd.foo:', [evt.item, evt.from]);} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
Sortable.create(byId('bar'), { |
||||||
|
group: "words", |
||||||
|
animation: 150, |
||||||
|
onAdd: function (evt){ console.log('onAdd.bar:', evt.item); }, |
||||||
|
onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); }, |
||||||
|
onRemove: function (evt){ console.log('onRemove.bar:', evt.item); }, |
||||||
|
onStart:function(evt){ console.log('onStart.foo:', evt.item);}, |
||||||
|
onEnd: function(evt){ console.log('onEnd.foo:', evt.item);} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// Multi groups
|
||||||
|
Sortable.create(byId('multi'), { |
||||||
|
animation: 150, |
||||||
|
draggable: '.tile', |
||||||
|
handle: '.tile__name' |
||||||
|
}); |
||||||
|
|
||||||
|
[].forEach.call(byId('multi').getElementsByClassName('tile__list'), function (el){ |
||||||
|
Sortable.create(el, { |
||||||
|
group: 'photo', |
||||||
|
animation: 150 |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// Editable list
|
||||||
|
var editableList = Sortable.create(byId('editable'), { |
||||||
|
animation: 150, |
||||||
|
filter: '.js-remove', |
||||||
|
onFilter: function (evt) { |
||||||
|
evt.item.parentNode.removeChild(evt.item); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
byId('addUser').onclick = function () { |
||||||
|
Ply.dialog('prompt', { |
||||||
|
title: 'Add', |
||||||
|
form: { name: 'name' } |
||||||
|
}).done(function (ui) { |
||||||
|
var el = document.createElement('li'); |
||||||
|
el.innerHTML = ui.data.name + '<i class="js-remove">âś–</i>'; |
||||||
|
editableList.el.appendChild(el); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
// Advanced groups
|
||||||
|
[{ |
||||||
|
name: 'advanced', |
||||||
|
pull: true, |
||||||
|
put: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'advanced', |
||||||
|
pull: 'clone', |
||||||
|
put: false |
||||||
|
}, { |
||||||
|
name: 'advanced', |
||||||
|
pull: false, |
||||||
|
put: true |
||||||
|
}].forEach(function (groupOpts, i) { |
||||||
|
Sortable.create(byId('advanced-' + (i + 1)), { |
||||||
|
sort: (i != 1), |
||||||
|
group: groupOpts, |
||||||
|
animation: 150 |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// 'handle' option
|
||||||
|
Sortable.create(byId('handle-1'), { |
||||||
|
handle: '.drag-handle', |
||||||
|
animation: 150 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// Angular example
|
||||||
|
angular.module('todoApp', ['ng-sortable']) |
||||||
|
.controller('TodoController', ['$scope', function ($scope) { |
||||||
|
$scope.todos = [ |
||||||
|
{text: 'learn angular', done: true}, |
||||||
|
{text: 'build an angular app', done: false} |
||||||
|
]; |
||||||
|
|
||||||
|
$scope.addTodo = function () { |
||||||
|
$scope.todos.push({text: $scope.todoText, done: false}); |
||||||
|
$scope.todoText = ''; |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.remaining = function () { |
||||||
|
var count = 0; |
||||||
|
angular.forEach($scope.todos, function (todo) { |
||||||
|
count += todo.done ? 0 : 1; |
||||||
|
}); |
||||||
|
return count; |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.archive = function () { |
||||||
|
var oldTodos = $scope.todos; |
||||||
|
$scope.todos = []; |
||||||
|
angular.forEach(oldTodos, function (todo) { |
||||||
|
if (!todo.done) $scope.todos.push(todo); |
||||||
|
}); |
||||||
|
}; |
||||||
|
}]) |
||||||
|
.controller('TodoControllerNext', ['$scope', function ($scope) { |
||||||
|
$scope.todos = [ |
||||||
|
{text: 'learn Sortable', done: true}, |
||||||
|
{text: 'use ng-sortable', done: false}, |
||||||
|
{text: 'Enjoy', done: false} |
||||||
|
]; |
||||||
|
|
||||||
|
$scope.remaining = function () { |
||||||
|
var count = 0; |
||||||
|
angular.forEach($scope.todos, function (todo) { |
||||||
|
count += todo.done ? 0 : 1; |
||||||
|
}); |
||||||
|
return count; |
||||||
|
}; |
||||||
|
|
||||||
|
$scope.sortableConfig = { group: 'todo', animation: 150 }; |
||||||
|
'Start End Add Update Remove Sort'.split(' ').forEach(function (name) { |
||||||
|
$scope.sortableConfig['on' + name] = console.log.bind(console, name); |
||||||
|
}); |
||||||
|
}]); |
||||||
|
})(); |
||||||
|
|
||||||
|
|
||||||
|
// Background
|
||||||
|
document.addEventListener("DOMContentLoaded", function () { |
||||||
|
function setNoiseBackground(el, width, height, opacity) { |
||||||
|
var canvas = document.createElement("canvas"); |
||||||
|
var context = canvas.getContext("2d"); |
||||||
|
|
||||||
|
canvas.width = width; |
||||||
|
canvas.height = height; |
||||||
|
|
||||||
|
for (var i = 0; i < width; i++) { |
||||||
|
for (var j = 0; j < height; j++) { |
||||||
|
var val = Math.floor(Math.random() * 255); |
||||||
|
context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")"; |
||||||
|
context.fillRect(i, j, 1, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
el.style.background = "url(" + canvas.toDataURL("image/png") + ")"; |
||||||
|
} |
||||||
|
|
||||||
|
setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02); |
||||||
|
}, false); |
||||||
Loading…
Reference in new issue