可拖动的进度条
我正在尝试创建一个可拖动的栏，就像一个进度条。 在页面加载时，条形图将以预定的百分比表示，比如42％，是否有办法使该条形图可拖动？ 这是html：
我正在使用的jquery是：
$(function() { $( "#resizable" ).resizable({ handles: 'e' }); });
什么都没发生。 CSS处理跨度的大小。 我正在考虑在顶部创建一个箭头图形，用户可以使用该图形将条形拖动到不同的百分比，但我无法使这部分工作。 有什么建议？
这是我正在使用的CSS：
.reviewAttn_bar { background-color: #1a1a1a; -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; background-size: 100px 100px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); height: 65px; width: 280px; margin: 50px 0 50px -55px; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.reviewAttn_bar span { background-color: #ccc; -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; background-size: 100px 100px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); height: 71%; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
}
#resizable { display:block;
}
编辑： 更新这里的小提琴与你的所有来源手柄EAST也运作得很好
请注意，我包括jquery，jquery ui和jquery-ui CSS文件。
我在这里检查了jquery .resizable（）API文档
不要击败死马，但我注意到添加手柄E完全移除了右下方可拖动的“纹理”，虽然它仍然有效 – 你必须非常专门鼠标hover状态栏跨度的右侧才能看到光标变化并知道它可以resize。 只想覆盖我的所有基础 – 虽然你可能不会“看到”差异，但实际上是在小提琴上工作
默认情况下，css中的所有span元素都是“inline”元素 – 这意味着它们的css显示属性默认为
display:inline;
为了使jquery UI .resizable（）处理程序正常工作，必须在“块”元素（如div）上调用它。
香港专业教育学院采取你的代码，并在这里修改，工作源如下：
HTML
CSS
#resizable{ display:block; border:1px solid red; // can be ignored just to help visualize height:30px; // can be ignored just to help visualize }
JS
$(function() { $( "#resizable" ).resizable(); });
从可resize的处理程序中删除{handles：’e’}参数，并将css块样式添加到#resizable元素，所有内容现在都按预期工作。