JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.firebase.com/v0/firebase.js"></script>
<form>
<input id="newEntry" placeholder="Entry Name"/>
<button id="submit">Add</button>
</form>
<div id="entries"></div>
<div class="entry template">
<span class="text"></span>
<span class="options">
<button class="up">Up</button>
<button class="down">Down</button>
<button class="remove">remove</button>
</span>
</div>
CSS
#entries {
width: 400px;
}
.entry {
height: 30px;
line-height: 30px;
}
.entry .options {
float: right;
}
JavaScript
var rootRef, highestPriority, $entries;
rootRef = new Firebase("https://ordered-data.firebaseio-demo.com");
rootRef.on("child_added", function (snapshot) {
var entry = snapshot.name();
var priority = snapshot.getPriority();
highestPriority = Math.max(priority, highestPriority);
$entry = $(".entry.template").clone();
$entry.removeClass(star"template");
$entry.show();
$entry.attr('id', entry);
$entry.children(".text").html(entry + " Priority(" + priority + ")");
$entry.data('priority', priority);
$entry.data('name', entry);
$(".up", $entry).click(function () {
var $entry = $(this).parents(".entry");
var $prevEntry = $entry.prev();
if (!$prevEntry.length) return;
var entryRef = rootRef.child($entry.data('name'));
var prevEntryRef = rootRef.child($prevEntry.data('name'));
var entryPriority = $entry.data('priority');
var prevEntryPriority = $prevEntry.data('priority');
console.log(entryPriority, prevEntryPriority);
entryRef.setPriority(prevEntryPriority);
prevEntryRef.setPriority(entryPriority);
entryRef.data('priority', prevEntryPriority);
prevEntryRef.data('priority', entryPriority);
});
$(".down", $entry).click(function () {
var $entry = $(this).parents(".entry");
var $nextEntry = $entry.next();
if (!$nextEntry.length) return;
var entryRef = rootRef.child($entry.data('name'));
var nextEntryRef = rootRef.child($nextEntry.data('name'));
var entryPriority = $entry.data('priority');
var nextEntryPriority = $nextEntry.data('priority');
console.log(entryPriority, nextEntryPriority);
entryRef.setPriority(nextEntryPriority);
nextEntryRef.setPriority(entryPriority);
entryRef.data('priority', nextEntryPriority);
...