Skip to content

Instantly share code, notes, and snippets.

@jpd527
Last active May 30, 2017 10:44
Show Gist options
  • Save jpd527/9687359 to your computer and use it in GitHub Desktop.
Save jpd527/9687359 to your computer and use it in GitHub Desktop.
Drag n drop list Shiny JS
library(shiny)
shinyServer(function(input, output,session) {
output$list <- renderUI({
sortListInput("sortable",c(test1="one",test2="two"))
})
})
$(document).on("sortupdate", "ul.sortableList", function(evt) {
// evt.target is the button that was clicked
var el = $(evt.target);
// Raise an event to signal that the value changed
el.trigger("change");
});
var sortListInput = new Shiny.InputBinding();
$.extend(sortListInput, {
find: function(scope) {
return $(scope).find(".sortableList");
},
getValue: function(el) {
return $(el).sortable("toArray");
},
setValue: function(el, value) {
$(el).text(value);
},
subscribe: function(el, callback) {
$(el).on("change.sortableList", function(e) {
callback();
});
},
unsubscribe: function(el) {
$(el).off(".sortableList");
}
});
Shiny.inputBindings.register(sortListInput, "sortListInput");
Shiny.inputBindings.setPriority("sortListInput", 10);
library(shiny)
sortListInput <- function(inputId,data) {
tagList(
singleton(tags$head(tags$script(src = "js/sortList.js"))),
HTML(paste('
<ul id="',inputId,'" class="sortableList">
',paste('<li id="',data,'" class="ui-state-default">',if(is.null(names(data))) data else names(data),'</li>
',collapse="\n",sep=""),'</ul>',sep=""))
)
}
shinyUI(pageWithSidebar(
headerPanel("Drag n drop"),
sidebarPanel(
uiOutput("list")
),
mainPanel(
tags$head(HTML('<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
<style>
.sortableList { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.sortableList li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
.sortableList li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( ".sortableList" ).sortable();
$( ".sortableList" ).disableSelection();
});
</script>')),
sortListInput("sortable",c(test1="one",test2="two"))
)
))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment