JavaScript模拟文件拖选框样式v1.0的实例

  
  
  
  



  

    

      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
      

        

        
文件列表
      
    
  

* {margin: 0;padding: 0;}
body {height: 700px;border: 1px black solid;}
#selectBox {border: 1px solid #89d9ff;background-color: rgba(137, 217, 255, 0.5);position: absolute;display: block;}
#container {margin-top: 100px;margin-left: 200px;width: 1200px;height: 600px;border: 1px red solid;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
ul {margin: 20px;}
li {width: 100%;height: 40px;border-top: 1px #ddd solid;list-style: none;}
label {background: url('../images/lebal.png')no-repeat;background-position: 0 0;width: 15px;height: 15px;margin: 12.5px auto;display: block;}
.toggleLebalClass {background-position: 0 -52px;}
.toggleLiClass {background: #eeefff;}
.lebal {width: 40px;height: 40px;float: left;}
.file_name {width: 80%;height: 40px;float: left;}
p {line-height: 40px;}

"use strict";
var x, y;
$(function() {
  // 点选
  $("li").bind('click', function(event) {
    $(this).children(".lebal").children().toggleClass("toggleLebalClass");
    $(this).toggleClass("toggleLiClass");
  });
  // 复选
  $(".lebal").bind('mousedown', function(event) {
    event.stopPropagation();
  })
  // 拖选
  $("#container").mousedown(function(event) {
    x = event.pageX;
    y = event.pageY;
    $("#container").append("
");
    $("li").children(".lebal").children().removeClass("toggleLebalClass");
    $("li").removeClass("toggleLiClass");
    $("li").bind("mouseover", function() {
      $(this).children(".lebal").children().addClass("toggleLebalClass");
      $(this).addClass("toggleLiClass");
    });
  }).mousemove(function(event) {
    $("#selectBox").css({
      left: event.pageX > x &＃63; x : event.pageX,
      top: event.pageY > y &＃63; y : event.pageY,
      width: Math.abs(event.pageX - x),
      height: Math.abs(event.pageY - y)
    });
  }).mouseup(function(event) {
    $("#selectBox").remove();
    $("li").unbind("mouseover");
  })
  $("#container").mouseleave(function() {
    $("#selectBox").remove();
  })
});