Tryin' to do this without using the UI plugin... I have another variation working on a table.
Here I apply it to a select and its options.
Works perfectly in Chrome, OK in Firefox (highlights text when you move downward), and not at all in IE - despite various hacks to handle both the default behavior and IE specifically.
I should mention that this code was adapted in part from
http://www.lukedingle.com/javascript/sortable-table-rows-with-jquery-draggable-rows/#more-190 whom I have to say THANKS for getting me as far as I did with my table...
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Select Option Test</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />
<script type="text/javascript">
$(document).ready(function(){
// global variables
var mouseX, mouseY, lastX, lastY = 0;
// This function captures the x and y positions anytime the mouse moves in the document.
$().mousemove(function(e) {
//Tried for IE, messed up Firefox, alter effect in Chrome, and didn't work in IE
//mouseX = oEvent.clientX + document.body.scrollLeft;
//mouseY = oEvent.clientY + document.body.scrollTop;
mouseX = e.pageX;
mouseY = e.pageY;
//mouseX = e.clientX; //Works fine in Chrome, jerky in Firefox,
//mouseY = e.clientY;
});
//IE Doesn't stop selecting text when mousedown returns false we need to check.
var need_select_workaround = typeof $(document).attr('onselectstart') != 'undefined';
$('#selectItems option').live('mousedown', function (e) {
// Store the current location Y axis position of the mouse to determine which direction to move the option
lastY = mouseY;
var theOption = $(this);
theOption.fadeTo('fast', 0.4);
theOption.css('background', '#288593');//User friendliness in Chrome
theOption.css('color', 'white');
// This code fires a function each time the mouse enters over any option inside the select -- except $(this) one
$('option', theOption.parent() ).not(this).mouseenter(function(){
// Check mouse coordinates to see whether to pop this before or after
if (mouseY > lastY) {
$(this).after(theOption);
} else {
$(this).before(theOption);
}
// Store the current location of the mouse for next time a mouseenter event triggers
lastY = mouseY;
});
// This checks for a mouse up *anywhere*, not just on options so that the function runs even
// if the mouse is dragged outside of the selectBox.
$('select').mouseup(function () {
//Fade the option element back to full opacity
//doesn't work in Chrome, Works in Firefox, nothing in IE 7 or 8
theOption.fadeTo('fast', 1);
theOption.css('background', 'white');//User friendliness in Chrome
theOption.css('color', 'black');
// Remove the mouseenter events from the tbody so that the TR element stops being moved
$('option', theOption.parent()).unbind('mouseenter');
// Remove this mouseup function until next time
$('select').unbind('mouseup');
// Make text selectable for IE again with workaround for IE based browsers
if (need_select_workaround){
$(document).unbind('selectstart');
reorder();
}
});
//Preventing the default action and returning false will
// stop any text in the table from being highlighted
//Not work on down movement in Firefox, Works perfectly in Chrome, doesn't work at akk in IE 7 or 8
e.preventDefault();
// The workaround for IE based browers
if (need_select_workaround)
$(document).bind('selectstart', function (){ return false; });
return false;
}).css('cursor', 'move');
function reorder () {
var position = 1;
$('#selectItems option').each(function () {
$(this).removeClass('row1 row2').addClass( position % 2 ? 'row1' : 'row2');
position += 1;
});
}
});
</script>
</head>
<body>
<table>
<tr>
<td style="vertical-align: top;">
<form>
<select size="8" multiple="multiple" name="selectItems" id="selectItems" style="width: 150px; display: block;">
<option label="ItemOne" value="49">Item One</option>
<option label="ItemTwo" value="4">Item Two</option>
<option label="ItemThree" value="1">Item Three</option>
<option label="Item4" value="47">Item 4</option>
<option label="Item5" value="8">Item 5</option>
<option label="Item6" value="51">Item 6</option>
</select>
</form>
</td>
</tr>
</table>
</html>