JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <form action="rules_files.cfm" method="POST" >
				    <input type="submit" name="submitfilesform" value="Block these files"><p>
                    
                    <ol id="selectable">
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/compression.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/database.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/document.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/executable.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/help.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/imaging.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/java.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/mobile.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/torrent.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/videoaudio.png"></li>
                      <li style="padding-top:15px" class="ui-state-default"><img src="images/fileblocking/others.png"></li>
                    </ol>
                    
                <input type="text" size="2" class="selectResult" name="selectResult" />
                <input type="text" size="2" class="selectResult" name="selectResult" />
                <input type="text" size="2"...

CSS

#selectable .ui-selecting {
    background: #ccc;
  }
  #selectable .ui-selected {
    background: #999;
  }

JavaScript

$(function() {
	$("#selectable").bind("mousedown", function(e) {
		e.metaKey = true;
	}).selectable({
		stop: function() {
			$( "#selectable li").each(function(i, obj) {
				$("input.selectResult:eq(" + i + ")").val($(obj).hasClass('ui-selected') ? i + 1 : '');
			});
		}
	});
  
  $('form').on("submit", function(e) {
  	e.preventDefault();
    alert($(this).serialize());
    return false;
  });
});