html+js+css 实现拖拽工作进度

这里用到的js和css 

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/tbl.js"></script>
	<link rel="stylesheet" href="css/style.css">

tbl.js

$(function(){
	
	//解决火狐弹出新选项卡的问题
	$(".container").bind('drop',function(event){
		event.preventDefault();
		event.stopPropagation();
	});
	
	//拖拽开始时将被拖拽元素透明度设置为50%
	$('.canDrog > li').bind('dragstart',function(event){
		var event = event.originalEvent;
		event.target.style.opacity = .5;
		var dataText = $(event.target).attr('data-text');
		//firefox 必须添加
		event.dataTransfer.setData("text",dataText);
	});
	
	//拖拽过程不执行任何操作。将会被持续触发
	$('.canDrog > li').bind('drag',function(event){});

	//拖拽之后恢复被拖拽元素的透明度
	$('.canDrog > li').bind('dragend',function(event){
		var event = event.originalEvent;
		event.target.style.opacity = 1;
	});


	//将元素拖入当前元素
	$('.dataTbl').bind('dragenter','td',function(event){
		var event = event.originalEvent;
		event.target.style.backgroundColor='#fdfdfd';
	});
	//google chrome,opera需要添加
	$(".dataTbl").bind("dragover",'td',function(e){  
    e.originalEvent.preventDefault();  
  })  
  //将元素拖离当前元素
  $('.dataTbl').bind('dragleave','td',function(event){
		var event = event.originalEvent;
		event.target.style.backgroundColor='';
	});

	//将元素释放到当前元素中
	$('.dataTbl').bind('drop','td',function(event){
		var event = event.originalEvent;
		var text = event.dataTransfer.getData("text");
		//重置背景色
		event.target.style.backgroundColor='';
		//添加拖拽元素的类型
		$(event.target).removeClass();
		$(event.target).addClass(text);
		$(event.target).text(text);

		event.preventDefault();
		event.stopPropagation();
	});
});

‌bind()是JavaScript中的一个方法，用于创建一个新的函数，并将指定的对象作为新函数的上下文（this）绑定。在JavaScript中，函数的执行上下文（this）是在运行时确定的，取决于函数被调用的方式。使用bind()方法可以显式地指定函数的执行上下文，无论函数如何被调用，都会绑定到指定的对象上。‌12

bind()的用途

1. ‌事件处理程序‌：在事件处理程序中，使用bind()可以确保函数在执行时绑定到正确的事件目标上。
2. ‌回调函数‌：当将函数作为参数传递给其他函数时，使用bind()可以确保回调函数在执行时绑定到正确的对象上。
3. ‌创建函数的拷贝‌：使用bind()可以创建一个新的函数，该函数与原函数具有相同的代码，但绑定到不同的对象上。‌1

bind()的语法和返回值

‌语法‌：function.bind(thisArg[,arg1[,arg2[,...]]])

• thisArg：被绑定到函数上的对象，即当调用绑定后的函数时，函数中的this关键字会指向该对象。如果thisArg参数为null或undefined，则this关键字将指向全局对象（在浏览器中通常是window对象）。
• arg1, arg2, ...：要传递给函数的参数，这些参数将按照顺序传递给函数，并在调用函数时作为函数参数使用。

‌返回值‌：返回一个原函数的拷贝，并拥有指定的this值和初始参数。‌

event.originalEvent‌在JavaScript中用于访问原始的事件对象。在jQuery中，当事件处理程序被触发时，jQuery会对事件对象进行标准化处理，以便跨浏览器兼容。处理后的事件对象被保存在event对象的originalEvent属性中，这样开发者可以通过event.originalEvent访问到原始的事件对象‌。

使用场景和示例

在处理特定的事件时，原始事件对象可能包含一些jQuery处理后的对象中没有的信息。例如，在使用滚轮事件（mousewheel或DOMMouseScroll）时，不同浏览器有不同的属性来表示滚动的方向和距离。通过event.originalEvent，可以访问到这些原始的属性：

• ‌IE和Chrome‌：使用event.wheelDelta（向下滚动为负值）
• ‌Firefox‌：使用event.detail（向下滚动为正值）

 

‌event.target.style.backgroundColor‌ 用于获取或设置触发事件的元素背景颜色。当某个事件（如点击事件）发生时，event.target 指向触发事件的元素，通过 style.backgroundColor 可以获取或设置该元素的背景颜色。 

 event.preventDefault()方法用于取消事件的默认行为。例如，当用户点击提交按钮时，可以阻止表单的提交。这个方法的作用是通知浏览器不要执行与事件关联的默认动作。如果事件的 cancelable属性为false，则不能阻止默认动作，调用该方法将不会有任何效果。‌12

‌使用场景‌：

• ‌表单提交‌：在用户点击提交按钮时，阻止表单的默认提交行为，可以通过AJAX发送数据，实现异步提交。
• ‌链接导航‌：在用户点击链接时，阻止默认的跳转行为，通过JavaScript自定义导航逻辑，实现更灵活的用户交互。

‌兼容性和替代方案‌：

• ‌Internet Explorer:preventDefault()方法在IE中不被支持，可以使用windo.event.returnVaule=false;作为替代方案来阻止默认行为。

 

 style.css

body{
	margin: 0;
	padding:0;
	font-size: 14px;
	color: #333;
}
.container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20px;
	right: 20px;
}
table {
	width: 100%;
	border-collapse: collapse;
}
table th {
	background-color: #f5f7fa;
}
table td,table th {
	border: 1px solid #ebeef5;
	text-align: center;
	height: 2em;
}
table td:not(:first-child){
	cursor: move;
}
.canDrog {
	display: inline-block;
}
.canDrog li {
  
  padding: 7px 2em;
  font-size: 12px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: move;
  box-sizing: border-box;
  margin: 0 5px;
}
.canDrog li:nth-child(1),.optimal {
	background-color: #F56C6C;
	color: #fff;
}
.canDrog li:nth-child(2),.good{
	background-color: #E6A23C;
	color: #fff;
}
.canDrog li:nth-child(3),.medium{
	background-color: #409EFF;
	color: #fff;
}
.canDrog li:nth-child(4),.badly{
	background-color: #67C23A;
	color: #fff;
}

html 全部源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/tbl.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<b>types:</b> <ul class="canDrog">
			<li draggable="true" data-text="optimal">optimal</li>
			<li draggable="true" data-text="good">good</li>
			<li draggable="true" data-text="medium">medium</li>
			<li draggable="true" data-text="badly">badly</li>
		</ul>

		<table class="dataTbl">
			<thead>
				<tr>
					<th style="width: auto">section/weeks</th>
					<th style="width: 16%">Monday </th>
					<th style="width: 16%">Tuesday</th>
					<th style="width: 16%">Wednesday </th>
					<th style="width: 16%">Thursday</th>
					<th style="width: 16%">Friday</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>section_one</td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
				</tr>
				<tr>
					<td>section_two</td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
				</tr>
				<tr>
					<td>section_three</td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
				</tr>
				<tr>
					<td>section_four</td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
				</tr>
				<tr>
					<td>section_five</td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
					<td draggable="true" ></td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>