【发布时间】：2020-03-18 07:00:10
【问题描述】：
我需要在进度栏中显示进度值和剩余值。
这是我的 html 内容。
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
.bar {
width: 100px;
height: 20px;
margin: 2px;
border: 1px solid black;
background-color: lightgreen;
text-align: center;
float: left;
margin: 2px;
padding: 2px;
cursor: pointer;
border-radius: 3px;
}
.list {
background-color: lightblue;
border: 1px solid gray;
}
.items .ui-selected {
background: red;
color: white;
font-weight: bold;
}
.items {
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
.items li {
margin: 2px;
padding: 2px;
cursor: pointer;
border-radius: 3px;
}
.weekday {
float: left;
}
.availablelist {
background-color: orange;
display: inline;
}
</style>
</head>
<body>
<div style="float:left;width:500px;">
<div><h2>Total Credits = <span id="total-credits">80</span></h2> </div>
</div>
<div style="clear:both"></div>
<br>
<div id="timetable" style="float:left;width:700px;">
<div class="weekday">
<ul class="items">
<li class="list">
<label class="core-ins-tag-numb">Jhonny</label>
<input type="hidden" value="15" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Tim</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">George</label>
<input type="hidden" value="25" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Melissa</label>
<input type="hidden" value="20" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Alice</label>
<input type="hidden" value="5" name="credits" class="credits">
</li>
</ul>
</div>
<div class="weekday">
<ul class="items">
<li class="list">
<label class="core-ins-tag-numb">Jhonny</label>
<input type="hidden" value="20" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Tim</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">George</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Melissa</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
<li class="list">
<label class="core-ins-tag-numb">Alice</label>
<input type="hidden" value="10" name="credits" class="credits">
</li>
</ul>
</div>
<br>
<div id = "progressbar"></div>
</div>
<script>
$(function () {
$("#timetable .items").sortable({
connectWith: "ul"
});
/* for progress bar */
var progressbar = $( "#progressbar" );
$( "#progressbar" ).progressbar({
value: 0,
max:300
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val <= 00 ) {
setTimeout( progress, 100 );
}
}
setTimeout(progress, 3000);
/* for progress bar */
});
我有一个隐藏的价值，每个 li 项目都有一些学分，所以每当任何 li 从右侧拖到左侧时，我需要将每个左侧 li 学分的值相加，并与 Total credits 和显示具有如下图值的进度条
如果信用额度超过 80，我还需要确保不允许拖累，
如何做到这一点？
【问题讨论】：
-
您对哪一部分有困难？你有一个进度条。您可以设置最大值。您可以更改该值。所以进度条没有问题尽管有问题标题。问题是创建两个可以在它们之间拖动值的列表吗？ jquery-ui 站点有一个工作示例。从选择列表中获取值是否有问题？
$("ul.selected li")会给你。换句话说，您尝试过什么来解决您的需求？ （不只是创建一个进度条，这并不能解决需求） -
@freedomn-m，我正在寻找建议，我对进度条一无所知，如何实现上述功能？
-
"我不知道进度条" - 没关系，您可以找到如何绘制/更新进度条，通过查看您的代码自己的问题
-
@freedomn-m，你有什么建议吗？
-
嗨@Manjunath 我想了解这些事件应该如何在这里发生。从我可以看到你有 2 个列表，如果我理解正确，当项目在列表之间移动时，这会影响进度条。如果可能的话，你能更详细地解释一下，那么我可以帮忙，一步一步来。
标签： jquery drag-and-drop progress-bar jquery-ui-sortable