jQuery UI Icon Test - Icon Sorting
Jerky and unstable dragging affecting sorting of elements inside sortable containers. Affects jQuery UI 1.9.1 and above (1.10.0 included)
by TJ VanToll
HTML
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<div class="dd-wrapper">
<div id="main">
<p class="pb-summary">Any jQuery UI version higher than 1.9.0 will result in unstable dragging in source container and extremely hard dragging in target container.</p>
<div id="icon-container" class="outter-container">
<div id="tmce-cont" class="icons">
<ul id="tmce-icons" class="inner-container">
<li id=bold class="draggable wp"><img title="bold" src="http://elblawg.com/jqueryui-test/images/wp-icons/bold.png" alt="bold" /></li>
<li id=italic class="draggable wp"><img title="italic" src="http://elblawg.com/jqueryui-test/images/wp-icons/italic.png" alt="italic" /></li>
<li id=strikethrough class="draggable wp"><img title="strikethrough" src="http://elblawg.com/jqueryui-test/images/wp-icons/strikethrough.png" alt="strikethrough" /></li>
<li id=bullist class="draggable wp"><img title="bullist" src="http://elblawg.com/jqueryui-test/images/wp-icons/bullist.png" alt="bullist" /></li>
<li id=numlist class="draggable wp"><img title="numlist" src="http://elblawg.com/jqueryui-test/images/wp-icons/numlist.png" alt="numlist" /></li>
<li id=blockquote class="draggable wp"><img title="blockquote" src="http://elblawg.com/jqueryui-test/images/wp-icons/blockquote.png" alt="blockquote" /></li>
<li id=justifyleft class="draggable wp"><img title="justifyleft" src="http://elblawg.com/jqueryui-test/images/wp-icons/justifyleft.png" alt="justifyleft" /></li>
<li id=justifycenter class="draggable wp"><img title="justifycenter" src="http://elblawg.com/jqueryui-test/images/wp-icons/justifycenter.png" alt="justifycenter" /></li>
<li id=justifyright class="draggable wp"><img title="justifyright" src="http://elblawg.com/jqueryui-test/images/wp-icons/justifyright.png"...CSS
body{
font:14px Verdana,sans-serif;
height:100%;
margin:0;
padding:0;
width:100%;
}
input[type=button]{
padding:5px 10px;
}
.clear{
clear:both;
}
.color-blue{
color:#6db0f2!important;
}
.color-green{
color:#39bf42;
}
.color-orange{
color:Coral!important;
}
.color-red{
color:#ff4747!important;
}
.dd-wrapper{
color:#555;
height:auto;
margin:1% auto;
padding:20px;
position:relative;
width:90%;
}
#main{
margin:0 auto;
position:relative;
width:100%;
}
#main .icon-title{
color:#999;
display:inline-block;
font-weight:bold;
margin:7px 0 2px;
text-transform:uppercase;
}
#main .icons{
display:block;
float:left;
position:relative;
width:49%;
}
#tmce-icons{
background:Bisque;
border-color:Coral;
}
#wp-icons{
background:#d9ffd9;
border-color:#39bf42;
}
#main .inner-container{
border-radius:5px;
border-style:solid;
border-width:1px;
color:#999;
display:block;
font:italic 14px Verdana,sans-serif none;
margin:0;
min-height:34px;
padding:10px;
position:relative;
/*text-align:justify;*/
}
#main .inner-container li,#main .inner-container .ui-draggable-dragging{
border:1px solid transparent;
display:inline-block;
height:26px;
list-style-type:none;
margin:0 6px 0 0;
padding:2px;
position:relative!important;
}
#main .inner-container li:hover{
background-color:#fff;
border-radius:5px;
box-shadow:0 0 5px #fff;
cursor:move;
opacity:0.8;
}
#main .outter-container{
display:block;
float:none;
margin:5px auto;
position:relative;
width:100%;
}
.inner-container li.selected{
border-radius:5px!important;
box-shadow:none!important;
padding:5px!important;
}
#tmce-icons li.selected{
background-color:rgba(255,157,0,0.4)!important;
border:1px dashed #bf9c64!important;
}
#wp-icons li.selected{
background-color:rgba(57, 191, 66, 0.4)!important;
border:1px dashed #39BF42!important;
}
#row-container ul li.selected{
background-color:rgba(0,128,255,0.3)!important;
border:1px dashed...JavaScript
/**************************************************************************
Author : Marventus
Author Urls : http://thegeekinvasion.com
http://wordpress.org/support/profile/marventus
***************************************************************************/
/* Variable Declarations */
var cookieN = "jwl_jqui",
cookieOpt = {expires: 1, path: '/'},
inCont = ".inner-container",
relMsg = "#reload_msg",
tmce = "#tmce-icons",
wp = "#wp-icons"
;
/* Callback functions */
function jwlMatchHeights() {
var maxH = 0,
ta = $(inCont)
;
ta.each(function() {
$(this).removeAttr("style");
maxH = $(this).height() > maxH ? $(this).height() : maxH;
});
ta.height(maxH);
}
// Sortable: Receive
function jwlReceive() {
$(".selected").removeClass("selected").removeAttr("style");
}
// Sortable: Sort
function jwlSort() {
$(".ui-sortable-helper").addClass("selected");
jwlMatchHeights();
}
// Sortable: Start
function jwlStart() {
}
// Sortable: Stop
function jwlStop() {
$(".selected").removeClass("selected ui-sortable-helper");
}
/* Call UI Sortable */
$(function() {
var to = "pointer",
ta = inCont
;
$(ta).sortable({
appendTo: ta,
connectWith: ta,
receive: function( event, ui ) {
jwlReceive();
},
sort: function( event, ui ) {
jwlSort();
},
start: function( event, ui) {
jwlStart();
},
stop: function( event, ui ) {
jwlStop();
},
tolerance: to,
update: function( event ) {
jwlMatchHeights();
}
});
});
/* On Window Load */
$(window).load(function() {
/* Append all icons to their respective containers
$(".ui-sortable").each(function() {
rowId = "#"+$(this).attr("id");
$(rowId).children(".draggable").each(function() {
iconId = "#"+$(this).attr("id");
$(rowId).append( $(iconId) );
});
});*/
//Disable user selection to facilitate usage
$("body").disableSelection().css({'MozUserSelect': 'none', 'WebkitUserSelect': 'none', 'UserSelect' : 'none'});
// CSS Adjustments
jwlMatchHeights();
});