js问题:按住shift键选中多个文件,而且不仅仅如此。-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

js问题:按住shift键选中多个文件,而且不仅仅如此。

a123456678 2016-07-13 10:52:12 1293

就是在网页上模拟windows的文件多选效果,类似于百度云里面的多文件选中。需求如下(见下图):

  1. 单击某一图片,选中该图片,再次单击,取消选中
  2. 单击2图,2图被选中,按住shift,单击6图,2~6图都被选中,shift按住不放,单击4图,2~4图被选中,5、6图取消选中,shift按住不放,再次单击8图,那么2~8图都应该被选中
  3. 单击2图,2图被选中,按住shift,单击6图,2~6图都被选中,松开shift,单击10图,10图被选中,按住shift,单击12图,2~6图依然保持选中效果,并将10~12图都选中

1和2的功能已经实现了,见下方代码,直接粘贴到一个文件打开就可看到效果。但是第3个需求不知道怎么弄,第2个和第3个需求一个弄好了另外一个就废了。真蛋疼!求大神赐教。
screenshot

JavaScript Windows
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:55:26
    <!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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
        <title>keyMulSelect</title>
        <style type="text/css">
            #main {
                width: 1150px;
                height: 780px;
                border: 1px solid #e7e81a;
                margin: auto;
            }
     
            p {
                float: left;
                width: 150px;
                height: 150px;
                border: 1px dotted grey;
                margin: 19px;
            }
     
            p[sel = "sel"] {
                border: 1.8px solid red;
            }
        </style>
     
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var start = null;
                $("p").click(function (e) {
                    e = e || event;
                    if (e.shiftKey) {
                        var si = $(start).index(), ti = $(this).index();
                        var sel = $("p").slice(Math.min(si, ti), Math.max(si, ti) + 1);
                        sel.attr("sel", "sel");
                        $("p").not(sel).removeAttr("sel");
                        return;
                    }
                    start = this;
                    if ($(this).attr("sel") == "sel") {
                        $(this).removeAttr("sel");
                    } else {
                        $(this).attr("sel", "sel");
                    }
                })
            })
        </script>
    </head>
     
    <body>
    <div id="main">
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
     
        <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
    </div>
    </body>
    </html>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程