JQuery模拟拖拽

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhang_Red/article/details/7001240
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> MyTitle </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script type="text/javascript">
 
 var isMouseLeftDown = false;
 var tempColor = '';
 
 $(document).ready(function(){
  $('td').bind('mousedown', function(ev){      
   tempColor = $(this).css("backgroundColor");
   isMouseLeftDown = true; 
   $(this).css("border", 0);   
  }).bind('mouseup', function(){         
   tempColor = '';
   isMouseLeftDown = false;
   $('#hDiv').html(tempColor+"-color");   
  }).bind('mouseover', function(e){
   $('#hDiv').html("mouseover0000");
   if(isMouseLeftDown){
     $(this).css("backgroundColor", tempColor);
     $('#hDiv').html("mouseover");
     $(this).css("border", 0);
   }         
  }); 
 });
</script>
</head>
<body>
<table
    style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
    id="MyTable"
    border="1"
    cellspacing="0"
    cellpadding="0"
>
<thead>
        <tr>
        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            姓名
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            班级
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            语文
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            数学
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            英语
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            政治
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            历史
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            地理
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            物理
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            化学
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            生物
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            总分
                        </th>
                   
        </tr>
 
</thead>
    <tbody>
    <!-- 数据行 -->
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
                <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td style="background:red">
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td style="background:yellow">
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td style="background:blue">
                79
            </td>
            <td style="background:blue">
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

 

展开阅读全文

没有更多推荐了,返回首页