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

摘要：$(function{ //解决火狐弹出新选项卡的问题 $(".container").bind('drop',function(event){ event.preventDefault; event.stopPropagation; }); //拖拽开始时将

这里用到的js和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的用途

‌事件处理程序‌：在事件处理程序中，使用bind可以确保函数在执行时绑定到正确的事件目标上。

‌回调函数‌：当将函数作为参数传递给其他函数时，使用bind可以确保回调函数在执行时绑定到正确的对象上。

‌创建函数的拷贝‌：使用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